html - 垂直对齐同一单元格内的图像和文本？

Question

我有一个小的 2x2 HTML 表格。每个单元格包含一个图像和一段文本。

示例图片：

如您所见，文本垂直低于图像的垂直中间水平。相对于左侧的图像，如何使文本垂直居中？

我尝试了几个不同的display值，我无法解决这个问题。

JSFiddle：http: //jsfiddle.net/ahmadka/rbJNQ/

Answer 1

这一切 div 的行为就像一个表格：它是一个矩形块，参与块格式化上下文

.main-container 是 TABLE .container 是 ROWS .inner-container 是 CELLS

现在所有 div 的行为都像一个表格我只是垂直对齐中间图像所以所有内容都在中间对齐

.main-container{
  display:table;
  background:#bcbbbb;
  width:100%;
  height:100vh;
}
.container{
  display:table-row;

}
.inner-container {
    vertical-align: middle;
    display: table-cell;
    text-align: center;   
}
.inner-container figure{
    background-color:#807c7c;
    vertical-align: middle;
        display: inline-block;
    margin: 0;
    
}
.inner-container p {
    display: inline-block;
}

<div class="main-container">
  
<div class="container">
  <div class="inner-container">
    <figure>
      <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" alt="stack" width="100" height="100">
  </figure>
  <p>Example</p>
 </div>
  <div class="inner-container">
    <figure>
      <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" alt="stack" width="100" height="100">
  </figure>
  <p>Example</p>
 </div>
</div>
<div class="container">
  <div class="inner-container">
    <figure>
      <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" alt="stack" width="100" height="100">
  </figure>
  <p>Example</p>
 </div>
  <div class="inner-container">
    <figure>
      <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" alt="stack" width="100" height="100">
  </figure>
  <p>Example</p>
 </div>
</div>
</div>

Answer 2

使用这个 CSS //CSS

#nst_block #social_body table {
background: none repeat scroll 0 center transparent;
border: 1px dashed black;
height: 75px;
margin: 0 auto;
width: 280px;
}

#nst_block #social_body table a {
border: 0 none;
font-family: inherit;
font-size: 16px;
font-style: inherit;
font-weight: inherit;
line-height: 24px;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: baseline;
}

更新链接：http: //jsfiddle.net/rbJNQ/16/

Answer 3

你的代码看起来很复杂。它也不是真正的表格数据，因此您不应该使用<table>-element。

你可以像这样简单地解决它。我在这个答案中只包含了重要的 CSS 规则。

HTML

<div class="social_body">
    <a class="facebook">Facebook</a>
    <a class="twitter">Twitter</a>
    <a class="google">Google+</a>
    <a class="share">Share This</a>
</div>

CSS

.social_body {
    width: 280px;
    overflow: hidden;
    margin: 0 auto;
    border: 1px dashed black;
}

.social_body a {
    float: left;
    width: 50%;
    font-size: 16px;
    line-height: 24px;
}

.social_body a:before {
    content: '';
    float: left;
    width: 24px;
    height: 24px;
    margin: 0 10px 0 0;
    background: transparent 0 0 no-repeat;
}

.social_body a.facebook:before {
    background-image: url(http://i.imgur.com/QglLT5Q.png);
}

.social_body a.twitter:before {
        background-image: url(http://i.imgur.com/QglLT5Q.png);
}

/* […] You see where this is going. */

演示

先试后买

Answer 4

出色地。尝试这个：

<td>
<a id="social_twitter" onclick="window.open(this.href,'external'); return false;" href="http://twitter.com/JenierTeas">
    <span>icon</span>
</a>
    <span style="vertical-align: middle;">Twitter</span>
</td>

Answer 5

我意识到这个问题已经有 4 年历史了，但是，嘿，为什么不回答它 - 也许它可以帮助其他人，因为 OP 可能同时以一种或另一种方式解决了它。

在 2017 年，你的问题，Ahmad，在flexbox的帮助下很容易解决（只需谷歌它，你肯定会喜欢它 - 如果你还没有听说过，那就是）为直接“孩子”设置表的td-s。您需要做的是将以下内容添加到小提琴中的 CSS 中：

#nst_block #social_body table td > *
  {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  }

主轴定位由 完成，justify-content交叉轴定位（在您的情况下为垂直轴定位）由 完成align-items。

就这样。

Answer 6

您可以使用表格进行设计。将图标保留在一个单元格中，将文本保留在另一个单元格中。使它们垂直对齐为中间。所以无论图标的高度是多少，文本都会垂直居中对齐。或者，如果您只针对新浏览器，那么您可以使用弹性盒模型进行设计。