1. 文本居中

首先编写一个简单的html代码,设置一个类名为parentDiv的div对象。html代码如下:

复制代码代码如下:
<div class="parentDiv">
这里随意填写~...
</div>

.1 实现文字水平居中(使用text-align)

对div.parentDiv设置text-align: center;来实现。CSS代码如下:

复制代码代码如下:
[css]</p> <p>.parentDiv {
width:200px;
height:100px;
border: 1px solid #ececec;
text-align:center; /*水平居中*/
}

有些时候,你会发现即使使用了text-align: center;属性,但是仍然没有起到居中的作用。原因就在于div标签本身没有定义自己居中的属性,而且这样做对布局是非常不科学的方法。正确的设置方法其实很简单就是给.parentDiv添加以下属性:margin-left: auto;和margin-right: auto;即可。具体可看2.1。

注:在父级元素定义text-align: center;属性的意思就是在父级元素内的内容居中;对于IE浏览器这样设置就没问题了,但在Mozilla浏览器中却不行。解决办法就是:在子元素定义设定时,再加上margin-left: auto;及margin-right: auto;就没问题了。需要说明的是如果想用这个方法使整个页面要居中,建议不要套在一个div里,可以依次拆出多个div,只要在每个拆出的div里定义margin-left: auto;及margin-right: auto;就行。

1.2 单行文本垂直居中(使用line-height)

文字在层中垂直居中使用vertical-align属性是做不到的,所以这里有个比较巧的方法就是:设置height的高度与line-height的高度相同。CSS代码如下:

复制代码代码如下:
[css]</p> <p>.parentDiv {
width:200px;
height:100px;
border: 1px solid #ececec;
text-align:center; /* 水平居中 */
line-height: 100px; /* line-height = height */
}

1.3 文本垂直居中(使用vertical-align)

可以使用vertical-align实现垂直居中,不过vertical-align仅适用于内联元素和table-cell元素,因此之前需要转化。


复制代码代码如下:
[css]</p> <p>.outerBox{
width:200px;
height:100px;
border: 1px solid #ececec;
text-align:center; /* 水平居中 */
display:table-cell; /*转化成table-cell元素*/
vertical-align:middle; /*垂直居中对齐,vertical-align适用于内联及table-cell元素*/
}

1.4 图片垂直居中(使用background-position)

 这里指的是背景方法,在div.parentDiv对象中使用background-position属性。CSS代码如下:


复制代码代码如下:
[css]
parentDiv {
background: url(xxx.jpg) #ffffff no-repeat center;
}

注:关键就在于最后的center,这个参数定义图片的位置。当然,background-position属性还可以写成“top left"或者"bottom right"等,也可以直接写数值。

2. div居中

首先编写一个简单的html代码,设置一个父div类名为parentDiv,再设置一个子div类名为childDiv。html代码如下:

复制代码代码如下:
<div class="parentDiv">
<div class="childDiv"></div>
</div>

实现parentDiv和childDiv父子div的盒子宽高背景色和边框大小。CSS代码如下:

复制代码代码如下:
[css]

* {
-webkit-box-sizing: border-box; /*Safari*/
-moz-box-sizing: border-box; /*Firefox*/
box-sizing: border-box;
}

.parentDiv {
width:400px;
height: 100px;
background-color: #00ff00;
margin: 20px;
}

.childDiv {
width: 200px;
height:50px;
background-color: #ff0000;
}

2.1 水平居中(使用margin:auto)

当div.childDiv对象拥有固定宽度时,设置水平方向margin为auto,可以实现水平居中。CSS代码如下:

复制代码代码如下:
[css]
/*margin:auto实现水平居中,需要居中的div必须拥有固定的宽度*/
parentDiv .childDiv {
margin: 0 auto;
}

2.2 实现水平居中(使用text-align:center)

如果给子盒子div.childDiv设置display: inline-block不影响整体布局时,可以将子盒子转化为inline-block,对父盒子设置text-align:center实现居中对齐。CSS代码如下:

复制代码代码如下:
[css]</p> <p>/*
text-align: center;实现水平居中
需要子盒子设置为display: inline-block;
*/
.parentDiv {
text-align: center;
}</p> <p>.parentDiv childDiv {
display: inline-block;
}

2.3 table-cell元素居中

将父盒子设置为table-cell元素,可以使用text-align: center;和vertical-align: middle;实现水平、垂直居中。比较好的解决方案是利用三层结构模拟父子结构。html代码如下:

复制代码代码如下:
<div class="parentDiv tableCell">
<div class="id1">
<div class="childDiv">tableCell</div>
</div>
</div>

CSS代码如下:

复制代码代码如下:
[css]</p> <p>/*
table-cell实现居中
将父盒子设置为table-cell元素,设置
text-align: center; vertical-align: middle;
子盒子设置为inline-block元素
*/
.tableCell {
display: table;
}</p> <p>.tableCell .id1 {
display: table-cell;
text-align: center;
vertical-align: middle;
}</p> <p>.tableCell .childDiv {
display: inline-block;
}

2.4 绝对定位居中(利用margin实现偏移)

将parentDiv对象设置为定位元素(利用position: relative;属性),将childDiv对象设置为绝对定位,left和top均为50%,这时子盒子的左上角居中对齐,利用margin实现偏移。CSS代码如下:


复制代码代码如下:
[css]</p> <p>/*绝对定位实现居中*/
.parentDiv {
position: relative;
}</p> <p>.parentDiv .childDiv {
position: absolute;
left:50%;
top:50%;
margin-left:-100px; /*利用margin实现偏移,设置为宽度和高度的一半的负值*/
margin-top:-25px;
}

2.5 绝对定位居中(利用transform实现偏移)

绝对定位方式与2.4类似,只不过利用transform中的translate实现偏移。CSS代码如下:

复制代码代码如下:
[css]</p> <p>/*绝对定位实现居中,transform偏移*/
.parentDiv {
position: relative;
}</p> <p>.parentDiv .childDiv {
position: absolute;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform:translate(-50%, -50%) ;
transform:translate(-50%, -50%);
}

2.6 绝对定位居中(利用margin:auto实现偏移)

同样对子盒子实现绝对定位,这里使用top、right、bottom、left均为0,margin为auto实现偏移。CSS代码如下:

复制代码代码如下:
[css]</p> <p>/*绝对定位实现居中,margin:auto实现偏移*/
.parentDiv {
position: relative;
}</p> <p>.parentDiv .childDiv {
position: absolute;
left:0; /*top、right、bottom、left均为0*/
top:0;
right: 0;
bottom: 0;
margin: auto;
}

2.7 Flexbox居中

使用弹性盒模型(flexbox)实现居中。CSS代码:

复制代码代码如下:
[css]</p> <p>/*flexbox实现居中*/
.flexBox {
display: -webkit-box; /*Safari*/
display: -moz-box; /*Firefox*/
display: -ms-flexbox; /*IE*/
display: -webkit-flex; /*Chrome*/
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}

广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。