怎么让div中的文字垂直居中。
发布网友
发布时间：2022-04-24 04:30
共7个回答
热心网友
时间：2022-04-06 13:14
CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素
当然这对IE6以下的浏览器无效，所以还需添加hank针对IE6，然后用定位的方法去做。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字实现垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
text-align:center;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="subwrap">
<div id="content"><pre>现在我们要使这段文字垂直居中显示！
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
</pre></div>
</div>
</div>
</body>
</html>
热心网友
时间：2022-04-06 14:32
垂直居中的话只需设置inline-height和包含文字的那个DIV的Height一样高就ok。
热心网友
时间：2022-04-06 16:06
加样式
<style>
div{margin:0 auto;text-align:center;}
</style>
text-align:center;text-align:left;等都可以自己设置，垂直居中是vertical-align
热心网友
时间：2022-04-06 17:58
给它加一个样式比如text-align这个属性设置成CENTER!
热心网友
时间：2022-04-06 20:06
text-align:center
热心网友
时间：2022-04-06 22:30
what? vertical-align只对table有用？ 求LZ不脑残，div用V-align时只需先定义行高就行了
热心网友
时间：2022-04-07 01:12
一半都设置line-height：24px；再需要text-align:center
