html - CSS结构和规则

<div class="list">
    <div class="gif"><img></div>
    <div class="info">
        <div><span class="text">I am good</span></div>
    </div>
</div>

.info {padding:7px 0 0 38px}
.text {word-wrap: break-word}

如我们所见，我添加了padding-top:7px来使文本居中，如果有更多的单词，文本会稍微下降（图B）。

什么是（A解决方案）。

最佳答案

尝试在下面的代码中将任何文本垂直对齐。

.section {
  display: table;
  height: inherit;
  min-height: 100%;
  width: 100%;
}
.list {
  display: table-row;
  height: 100%;
  width: 100%;
}
.gif, .info {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
}
.gif {
  width: 15%;
}
.gif img {
  height: 100%;
}
.info {padding:0 0 0 38px}
.text {word-wrap: break-word}

<div class="section">
<div class="list">
    <div class="gif"><img src="http://image.made-in-china.com/3f2j00KNTaikdRZWbV/Small-Size-Colorful-Nature-Round-Shell-Sewing-Button-with-Two-Holes.jpg"></div>
    <div class="info">
        <div>
          <span class="text">I am good</span>
          <span class="text">I am good</span>
          <span class="text">I am good</span>
        </div>
    </div>
</div>
</div>

关于html - CSS结构和规则，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38670432/