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を追加しました。

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