列布局垂直对齐答案

【问题标题】：Column layout vertical align列布局垂直对齐
【发布时间】：2012-06-25 04:16:49
【问题描述】：

我希望实现如下布局：

但是，我似乎无法让文本正确垂直对齐。

我尝试了浮动 div，但无法让它工作。

什么是最简单、最语义化的方式，使用最少的元素来创建上述内容，而不是使用表格？

【问题讨论】：

与rowspan 和colspan一起使用表
嗯——不过我想避免这种情况。人们告诉我表格对 SEO 来说是邪恶的，不应该用于其他标记
@T-ShirtDude +1 推荐我的代码
@jacktheripper 表对 SEO 来说并不邪恶。如果您不将它们用于表格数据，它们会被认为是“不雅”，但 SEO 与此无关。

标签： html css layout vertical-alignment

【解决方案1】：

我认为您要查找的元素本身是 align="center"。

这行得通：

<table border="1px" width="100px" height="100px">
   <tbody>
          <tr>
             <td align="center" width="50px" rowspan="2">HI</td>
             <td align="center" style="vertical-align:center;" width="100"> test </td>
          </tr>
          <tr>
             <td align="center" style="align:center;vertical-align:center;" width="100"> test2 </td>
        </tr>
    </tbody>
</table>

【讨论】：

随着 html5 的最新更新，表格不是一个好的选择

【解决方案2】：

如果您真的想使用 div，请执行以下操作：

<div style="overflow:auto">
    <div style="float:left">left stuff</div>
    <div style="float:right">
        <div>right top stuff</div>
        <div>right bottom stuff</div>
    </div>
</div>

根据需要提供适当的宽度/高度

【讨论】：

但是整个问题都围绕着垂直对齐，所以这个答案是无关紧要的
好吧，在这种情况下，您可以向<div>s 添加一个 'display:table-cell' 虽然我认为这仅兼容 IE8 及更高版本，或者只使用一个表格并完成它:)
怎么样？那应该是你的答案！
@jacktheripper 你可以在这里查看其他垂直居中的方法student.oulu.fi/~laurirai/www/css/middle

【解决方案3】：

.wrapper { 边框：1px 纯红色；溢出：隐藏；宽度：740px； }

.box { 高度:300px;宽度：400px；边框：1px 纯蓝色；位置：相对；向左飘浮; }

.box2 { 宽度：300px;高度：200px；位置：相对;
边框：1px 纯红色；溢出：隐藏； }

.里面{ 位置：绝对；左：93px；顶部：21px；宽度：135px；高度：84px；显示：表格；
}
.inside p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

html

<div class="box">wererewrwe
</div>

 <div class="box2">
    <div class="inside">
      <p>inside</p>
  </div>
<div>

【讨论】：

【解决方案4】：

以下解决方案适用于所有现代浏览器和 IE8+。如果您需要兼容 IE6 和 IE7，那么我建议您使用表格。

<div class="block">
    <div class="left">Left</div>
    <div class="right" style="background: red"><p>Text</p></div>
    <div class="right" style="background: blue"><p>Text</p></div>
</div>

和

div.block { width: 640px; height: 480px; border: solid 2px black; padding: 4px; }
div.left { float: left; width: 320px; height: 480px; background: green; }
div.right { float: right; width: 320px; height: 240px; display: table;}
div.right p { display: table-cell; vertical-align: middle; text-align: center; }

您可以在 jsfiddle 上查看此示例。

【讨论】：