Question

  <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>

我需要将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;
}

Tnxs

Answer 1

您的意思是垂直居中，水平居中还是两者兼而有之？

内嵌内容的水平居中很容易。只需将text-align: center应用于包含块即可。使用CSS在另一个块内水平对中一个块通常使用：

#centerMe { margin: 0 auto; }

注意：在IE6上，这要求IE处于“符合标准”而不是“怪癖”模式。要强制此始终，请在HTML文档上添加DOCTYPE。例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

垂直居中更糟糕。

您可能需要查看Vertical Centering in CSS。这实际上是一个非平凡的问题。您使用的vertical-align样式属性仅适用于表格单元格（以跨浏览器向后兼容的方式）。对于它的价值而言，这对于表来说是微不足道的。

Answer 2

您编写的HTML在我的浏览器中有效（FF 3.5.8）。但是，您缺少两个结束<\div>标记。也许你的浏览器比我的浏览器更严格。另外，<center>已弃用，因此请尽可能避免使用它。

我会把所有这些都放在评论中，但我的代表还不够高！：/

Answer 3

尝试关闭.nodeText div。

div中的中心文本

3 个答案: