CSS - 如何在图像附近的表格中使用"垂直对齐：中间"？

Question

我想将图像与同一行上的表对齐。我尝试过使用vertical-align : middleCSS属性，但它不能正常工作。桌子不是以图像的中间为中心的。

<div align="center">
    <img src="timing-overview.png" width="800px"/>
    <table border style="display: inline-block; vertical-align: middle;">...</table>
</div>

我尝试用inline-table或table替换inline-blockdisplay属性，但没有成功。

我找到的解决方案是设置一个vertical-align: top并添加这两个属性：position: relative和top: Xpx。

但我需要从顶部调整像素数，这取决于图像和表格的大小。

<div align="center">
    <img src="timing-overview.png" width="800px"/>
    <table border style="display: inline-block; vertical-align: top; position: relative; top: 50px;">...</table>
</div>

在我的情况下，图像的高度大于桌子的高度。

有人有主意吗？

问候

Answer 1

您不应该为表使用display属性，因为它已经具有属性display: table。将表包装在div中，并将样式display: inline-block添加到该div中。

.table-wrap {
 display: inline-block;
 vertical-align: middle;
}
img {
vertical-align: middle;
}
td {
  padding: 10px;
  border: solid 1px black;
}

 <img src="https://s-media-cache-ak0.pinimg.com/236x/38/21/61/3821618a4005b0b4aaaa741a53f496e9.jpg" width="200px"/>
    
    <div class="table-wrap">
    <table>
      <tr><td>1</td></tr>
      <tr><td>2</td></tr>
      <tr><td>3</td></tr>
      <tr><td>4</td></tr>
      <tr><td>5</td></tr>
     </table>
    </div>

Answer 2

您可以使用flexbox轻松实现您想要的。请参阅下面的示例。div .center包含所有内容。

CSS3 Flexible Box或flexbox是一种布局模式，提供用于在页面上排列元素，使元素当页面布局必须适应不同的屏幕尺寸和不同的显示设备。

在Mozilla开发者网络上阅读更多关于flexbox的信息。

.center {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

<div class="center">
    <img src="http://i.imgur.com/AzeiaRY.jpg" width="400px"/>
    <table border style="">
      <tr>
        <td>BLALBLALBLALBLALBAL</td>
      </tr>
    </table>
</div>