CSS结构和规则

Question

<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解决方案）。

Answer 1

尝试使用以下代码进行任何文本的垂直对齐。

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