在 div 中居中文本

Son*_*chy 4 html css

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

cle*_*tus 5

你的意思是垂直居中,水平居中还是两者兼而有之?

内联内容的水平居中很容易。只需应用于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您使用的样式属性仅适用于表格单元格(以跨浏览器向后兼容的方式)。这对于一张桌子的价值来说是微不足道的。