lovepeople lovepeople - 4 months ago 16
CSS Question

CSS Structure and Rules

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


As wee can see, I added
padding-top:7px
to keep the texts center, if there is more words the texts go down a bit (image B).

What is (A solutions).

enter image description here

Answer

Try below code for vertical-align middle of any text.

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