css 实现div 中一行和多行文字水平和垂直居中 随笔
css 实现div 中一行和多行文字水平和垂直居中 随笔
备注:Css代码中注释的部分为第二种方法,可以自己尝试一下
css实现div中一行文字水平和垂直居中
css代码:
.onediv
{
/*display: table-cell;*/
/*text-align: center;*/
/*vertical-align:middle;*/
/*width: 400px;;*/
/*height:300px;*/
/*background-color: red;*/
width: 800px;
height: 300px;/*div高度*/
line-height: 300px;/*div中文字行距*/
text-align: center;/*div中文字水平居中*/
background-color:red;/*背景色*/
}
html代码:
效果图:
css实现div中多行文字水平和垂直居中
css代码:
.twodiv
{
width: 400px;/*div宽度*/
height: 220px;/*div高度*/
padding-top: 220px;/*这里的值和div高度一致*/
padding-bottom: 100px;/*这里的值固定为100*/
text-align: center;/*div中的文字水平居中*/
background-color: aqua;/*设置背景色*/
/*display: table-cell;*/
/*vertical-align:middle;*/
/*text-align:center;*/
/*background-color: aqua;*/
/*优点:等高布局,无需设置高度,文字轻松实现垂直居中*/
/*缺点:ie7以下不兼容!*/
}
html代码:
我是第一排
我是第二排
我是第三排
效果图:
css 实现div 中一行和多行文字水平和垂直居中 随笔相关教程