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

html-css09

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

可以用“text-align”属性和“line-height”属性。

1、新建html文件,在body标签中添加div标签,在div标签输入文字,这里以“演示文本”为例,给div标签设置宽度、高度和背景色属性,属性值分别为200、100和灰色,这时“演示文本”默认位置为div盒子的左上方:

2、这时给div标签添加上“text-align”属性,属性值为“center”,这时文字将会在div容器中水平居中:

3、这时给div标签添加行高“ling-height”属性,属性值为高度的值“100px”,再添加“vertical-align”属性,属性值为“middle”,这时文字将会水平垂直都居中:

通过设置display样式为table-cell。

1、定义div的css

<style>

div{

  display:table-cell

}

</style>

2、定义水平div

<body>

  <div>1</div><div>2</div><div>3</div>

</body>

补充:

display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性。