<div>
<div class="left">
<div align="center" class="node">
<div class="nodeText">
<h2 >test</h2>
</div>
<div class="node">
<h2>test</h2>
</div>
<div class="node">
<h2>test</h2>
</div>
<div>
Run Code Online (Sandbox Code Playgroud)
我需要在 div 中居中文本似乎没有任何效果
.left {
float:left;
width:200px;
border:solid 1px black;
text-align: center;
}
.node {
height:200px;
border:solid 1px black;
margin:0 auto;
}
.nodeText{
vertical-align: middle;
}
h2{
text-align: center;
}
Run Code Online (Sandbox Code Playgroud)
你的意思是垂直居中,水平居中还是两者兼而有之?
内联内容的水平居中很容易。只需应用于text-align: center包含块。使用 CSS 在另一个块中水平居中一个块通常是通过以下方式完成的:
#centerMe { margin: 0 auto; }
Run Code Online (Sandbox Code Playgroud)
注意:在 IE6 上,这要求 IE 处于“标准兼容”而不是“怪癖”模式。要强制这样做,请始终DOCTYPE在您的 HTML 文档上放置一个。例如:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Run Code Online (Sandbox Code Playgroud)
垂直居中要糟糕得多。
您可能想查看CSS中的垂直居中。这实际上是一个不平凡的问题。vertical-align您使用的样式属性仅适用于表格单元格(以跨浏览器向后兼容的方式)。这对于一张桌子的价值来说是微不足道的。