Question

我试图垂直居中表格单元格中的某些项目。我已经在stackoverflow和其他几个网站上尝试了大多数解决方案而没有任何运气。

在此单元格中，图像卡在表格单元格的顶部，而文本正确地垂直居中：

<tr>
    <td class='sidebar-middle'>   <!--sets a left and right border-->
        <a target="_blank" href="data/Standards.pdf">
            <div style='width: 100%;text-align: center;overflow: hidden;'>
                <div style='float: left;width: 34%; text-align: center;height: 100%;'>
                    <img src='images/logo.jpg' alt='Standards' style='width: 80px;vertical-align: middle;'/>
                </div>
                <p style='float: right; vertical-align: middle;width: 64%;'>Local Facility Standards to be Followed</p>
            </div>
        </a>
    </td>
</tr>

然而，使用相同的方法，这似乎有效：

<tr>
    <td class='sidebar-bottom'> <!--sets a left, right, and bottom border-->
        <a target="_blank" href="Policies.html">
            <div style='width: 100%;text-align: center;overflow: hidden;'>
                <div style='float: left;width: 35%; text-align: center;height: 100%;'>
                    <img src='images/patch.png' alt='Policies' style='height: 80px;vertical-align: middle;'/>
                </div>
                <p style='float: right; vertical-align: middle;width: 64%;'>Policies</p>
            </div>
        </a>
   </td>

在第一个（令人沮丧的）示例中，图像高度为112像素，缩小为30.在第二个（工作）示例中，图像高度为122像素，缩小为80.我怀疑图像高度与它有关，但无法进一步解决问题。

Answer 1

使用CSS Tables（而不是浮点数）（因为你开始使用实际的布局表）。

* {
  margin: 0;
  padding: 0;
}
.inner {
  display: table;
  table-layout: fixed;
  width: 100%;
  text-align: center;
  overflow: hidden;
}
.left {
  display: table-cell;
  width: 34%;
  text-align: center;
  background: pink;
}
img {
  width: 80px;
}
.right {
  display: table-cell;
  width: 64%;
  vertical-align: middle;
  background: lightblue;
}

<a target="_blank" href="data/Standards.pdf">
  <div class="inner">

    <div class="left">

      <img src='http://www.fillmurray.com/80/80' alt='Standards' />
    </div>

    <p class="right">Local Facility Standards to be Followed</p>

  </div>
</a>

Answer 2

在为元素分配类时，我没有看到更改。当我用<tr>和<td>替换<div>和<section>时，它没有改变。它就像你想要的那样工作。没有为类.sidebar-middle和.sidebar-bottom提供样式信息，因此可能是您的问题（或您忽略的其余代码）。 注意：我不需要修改我添加的div.C或<section>，因此可能不需要表组件，浮点数就足够了。

当大量使用内联样式时，如果您遇到许多编码灾难，那么HTML就会变得混乱，并且没有简单的方法来修复它。正如Paulie_D和hidanielle已经说过的那样，你的vertical-align对浮动元素不起作用，而HTML表格 - 布局也是如此。在21世纪，我们使用table-* CSS properties。

段

.A {
  width: 100%;
  text-align: center;
  overflow: hidden;
}
.B {
  float: left;
  width: 34%;
  text-align: center;
  height: 100%;
}
.img {
  width: 80px;
  height: 80px;
}
.note {
  float: right;
  width: 64%;
}

<div class='C'>
  <section class='sidebar-middle'>
    <a target="_blank" href="http://www.orimi.com/pdf-test.pdf">
      <div class='A'>
        <div class='B'>
          <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png' alt='Lenna' class='img' />
        </div>
        <p class='note'>Local Facility Standards to be Followed</p>
      </div>
    </a>
  </section>
</div>



<div class='C'>
  <section class='sidebar-bottom'>
    <a target="_blank" href="http://www.example.com">
      <div class='A'>
        <div class='B'>
          <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png' alt='Lenna' class='img'>
        </div>
        <p class='note'>Policies</p>
      </div>
    </a>
  </section>
</div>

垂直居中项目而不设置高度

2 个答案:

段