如何使文字在div中水平和垂直居中的css代码，<div>水平垂直居中<div>

html-css010

如何使文字在div中水平和垂直居中的css代码，<div>水平垂直居中<div>,第1张

使文字在div中水平和垂直居中的的css样式为

text-align:center /*水平居中*/

line-height: 20px /*行距设为与div高度一致*/

示例如下：

HTML元素

<div>水平垂直居中</div>

css样式

div{

width:200pxheight:200px  /*设置div的大小*/

border:1px solid green    /*边框*/

text-align: center        /*文字水平居中对齐*/

line-height: 200px        /*设置文字行距等于div的高度*/

overflow:hidden

}

显示效果

div 中的字体如何用CSS控制居下的方法：

1、用margin-top 或者padding-top 设置。

代码：

<div class="text"></div>

.text {width:??pxheight:??pxmargin-top:10px} //这里用margin或padding 都行。

2、设置行高，line-height 属性

如：line-height:30px 数字越大行高越高 行与行的距离越大。

代码：

<div class="text"></div>

.text {width:??pxheight:??pxline-height:??px}