多行垂直对齐

-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

多行垂直对齐

回答

相关问题