列布局垂直对齐

Posted 2023-03-05

【中文标题】列布局垂直对齐

【英文标题】：Column layout vertical align

【发布时间】：2012-06-25 04:16:49

【问题描述】：

我希望实现如下布局：

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

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

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

【问题讨论】：

与rowspan 和colspan一起使用表

嗯——不过我想避免这种情况。人们告诉我表格对 SEO 来说是邪恶的，不应该用于其他标记

@T-ShirtDude +1 推荐我的代码

@jacktheripper 表对 SEO 来说并不邪恶。如果您不将它们用于表格数据，它们会被认为是“不雅”，但 SEO 与此无关。

【参考方案1】：

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

这行得通：

<table border="1px"  >
   <tbody>
          <tr>
             <td align="center"  rowspan="2">HI</td>
             <td align="center" style="vertical-align:center;" > test </td>
          </tr>
          <tr>
             <td align="center" style="align:center;vertical-align:center;" > 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 上查看此示例。