多行垂直對齊

-1

我有一個圖像，我想與多行<br>。文本需要在中間對齊。多行垂直對齊

<table id="myTable"> 
    <tr> 
     <td> 
      <a> 
       <div> 
        <img class="vertical-align-icon-middle" src="/images/friendjoined_icon.png" /> 
       </div> 

      </a> 
      <div class="user-details"> 
       <div class="username-div"><span class="text-design">My profile</span></div><br/> 
       <div class="points-rank"> 
        <span class="secondary-text no-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </span></div> 
      </div> 
     </td> 
     <td class="right-icon"><p>hi</p></td> 
    </tr> 

</table>

我不知道我能做些什麼來保持文本在中間，因爲圖像是響應式的，它可以調整大小。需要一些幫助，謝謝。

我想要什麼：

is something like this

來源

2017-03-08 Hateres1990

你只想要對準用戶的詳細信息？你在自己的單元格中有「嗨」，這就是爲什麼我問，你不應該真的在使用表格來進行佈局，因爲它們是用於表格數據。如果您只想使用您擁有的標記將文本居中置於圖像下的用戶細節中，則可以使用#myTable img {width：100％;}。身高：自動; } #myTable .user-details { text-align：center; }' – PhilS

如果您打算使用表格，爲什麼不將用戶詳細信息添加到同一個單元格中，因爲您已添加「Hi」？ – PhilS

正如我在評論提到過，您應儘量避免使用表格佈局，如果你想有並排的圖像和文字的一面，我想使用兩個div所以你必須是這樣的：

.image-block, 
 
.user-details { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding: 5px; 
 
}

<div class="image-block"> 
 
    <img class="vertical-align-icon-middle" src="http://placehold.it/400x200/" alt="" /> 
 
</div> 
 
<div class="user-details"> 
 
    <div class="username-div"> 
 
    <span class="text-design">My profile</span> 
 
    </div> 
 
    <div class="points-rank"> 
 
    <span class="secondary-text no-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </span> 
 
    </div> 
 
</div>

來源

2017-03-08 17:09:39 PhilS

多行垂直對齊

回答

相關問題