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

我希望实现如下布局:

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

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

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

【问题讨论】:

  • rowspancolspan一起使用表
  • 嗯——不过我想避免这种情况。人们告诉我表格对 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>

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

【讨论】:

  • 但是整个问题都围绕着垂直对齐,所以这个答案是无关紧要的
  • 好吧,在这种情况下,您可以向&lt;div&gt;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 上查看此示例。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-08-27
      • 1970-01-01
      • 2014-02-08
      • 1970-01-01
      • 1970-01-01
      • 2019-10-30
      相关资源
      最近更新 更多