Question

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

示例图片：

enter image description here

如您所见，文本垂直位于图像的垂直中间层之下。如何相对于左侧图像在中心垂直放置文本？

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

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

Answer 1

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

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

好。试试这个：

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

使用此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 4

您的代码看起来很复杂。它也不是真正的表格数据，因此您不应使用<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 5

我意识到这个问题已经有4年了，但是，嘿，为什么不回答呢？也许这对其他人有帮助，因为OP可能在此期间以某种方式解决了这个问题。

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

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

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

就是这样。

Answer 6

您可以使用表格进行设计。将图标保留在一个单元格中，将文本保留在其使它们垂直对齐为中间。那么图标的高度如何，文本将垂直对齐。或者如果您只定位新浏览器，则可以使用弹性框模型进行设计。

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

6 个答案: