文字
text-align属性功效于指定元素内的所有文字。例如以下代码令<p>元素中的所有文字居中对齐。
p {
text-align: center;
}
inline-block元素
平常的inline-block对象是<img>, <span>。inline-block元素在默认设置中和inline元素同样,是能够在一行中连续摆列的。令inline-block元素居中的第1步是将其转化为block元素,即保准一行仅有这一个元素。 运用display属性将inline-block转化为block。img {
display: block;
}
2. 接下来的过程和block元素同样。
block元素
平常的block对象是<p>, <div>, <section>。
办法1:将margin属性设为auto
下面两种写法的效果是同样的。写法1是一次性把margin的四个方向都设置了。倘若用写法2的话,能够把margin-top和margin-bottom设成其他数值。
div {
/* 写法1 */
margin: auto;
/* 写法2 */
margin-right: auto;
margin-left: auto;
}
margin: auto 只能实现水平居中,不可垂直居中。由于margin-top和margin-bottom的属性为auto时,实质上便是顶端对齐。
办法2:用百分数暗示width, margin
一个元素的范围由margin, border, padding, content(中心内容)构成。方便起见,把border和padding都设为0,而后只必须调节content的width和margin就能够实现水平居中了。
水平居中原则:margin的百分数 x 2 + width的百分数 = 100%
水平居中示例代码效果#parent {
/* 黑色区域 */
width: 100px;
height: 100px;
bac公斤round-color: #000;
}
#child {
/* 灰色区域 */
bac公斤round-color: #ddd;
height: 100px;
width: 20%;
margin-left: 40%;
margin-right: 40%;
}
然则,倘若想用类似的垂直居中原则(margin的百分数 x 2 + height的百分数 = 100%)的话,效果就不对了。div#child的高度、上下边距虽然都是咱们想要的数值,然则div#child的上边距超出了div#parent的范围。div#child仍然保持和div#parent的顶端对齐。因此,用百分数暗示width, margin的办法只适用于水平居中。
垂直居中示例代码效果
|