示例示例CSS3垂直居中是指在网页布局中,将元素垂直居中显示的技术。对于单行文本,可以使用line-height属性来实现:
CSS3垂直居中是指在网页布局中,将元素垂直居中显示的技术。
1. 对于单行文本,可以使用line-height属性来实现:
css
div{
width:200px;
height:50px;
line-height:50px; /* 设置行高与容器高度一致 */
text-align:center; /* 文本水平居中 */
}
2. 对于多行文本,可以使用display:table-cell和vertical-align属性来实现:
css
div{
width:200px;
height:50px;
display:table-cell; /* 设置为表格单元格 */
vertical-align:middle; /* 垂直居中 */
text-align:center; /* 文本水平居中 */
}
3. 对于块级元素,可以使用margin:auto和position:absolute/fixed属性来实现:
css
div{
width:200px;
height:50px;
position:absolute; /* 绝对定位 */
top:0;
left:0;
bottom:0;
right:0;
margin:auto; /* 自动计算上下左右的margin值,使元素垂直居中 */
}
本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处
评论列表(7条)