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

Question

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

示例图片：

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

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

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

Answer 1

所有 div 的行为都像 table：它是一个矩形块，参与块格式化上下文

.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

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

Answer 3

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

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

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

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

就是这样。

Answer 4

使用这个 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 5

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

您可以像这样简单地解决它。我在这个答案中只包含了重要的 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. */

演示

Try before buy

Answer 6

嗯。试试这个：

<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>