文字居中包括水平居中和垂直居中,当水平居中和垂直居中同时运用在一个块元素中就可以达到文字在一个板块中的居中效果了。
垂直居中
需要用到 line-height 属性。
<div style="width: 100px;
height: 60px;
line-height: 60px;
background-color: yellow;
color: black;">1</div>
line-height属性的作用是:设置对象内容的行高,既字体最低端与字体内部顶端之间的距离。如果没有属性 line-height,此时div中的内容默认是在这个div 的左上角。加上line-height:60px;意思是:让这里面的文字每一行占36个像素,那么,此时这一行文字的高度正好和div的高度相同。 就表现出垂直居中的效果了。
水平居中
属性 text-align,设置对象中内容的水平对齐方式。属性值为 center时,则表示内容居中对齐。
两个属性写在同一个div中
<div style="width: 100px;
height: 60px;
line-height: 60px;
text-align:center;
background-color: yellow;
color: black;">1</div>
则居中