如何垂直對齊旁邊的文字圖像

Question

JSFiddle

<div class="container"> 
    <img style="margin: 10px;" src="~/Content/Images/x.png" alt="" width="400" /> 
    <span style="margin-left: 50px;" class="h3" >Connecting People & Businesses Since 1992</span> 
</div> 

以上只顯示在桌面瀏覽器的罰款。但是，在移動設備上查看時，應該保留在圖像右側的文字會在圖像下方進行包裝。

<div class="container"> 
    <img class="col-md-6" src="~/Content/Images/x.png" /> 
    <span class="col-md-6 h3" >Connecting People & Businesses Since 1992</span> 
</div> 

那麼我該如何Bootstrap呢？我曾嘗試使用col-md-6類，但右側的文本不再在使用網格後垂直居中。

Answer 1

<div class="container"> 
    <img class="col-xs-6 col-md-6" src="~/Content/Images/x.png" /> 
    <span class="col-xs-6 col-md-6 h3" >Connecting People & Businesses Since 1992</span> 
</div> 

col-md-6表示「平板」大小以上的所有內容均使用12列中的6列。並且低於這個尺寸的所有東西都會回到12中的全部12，因爲你沒有指定任何東西[這就是你想要的東西，除非你希望它一直到'xs'的大小。

這有幫助嗎？

Answer 2

您可以使用簡單的兩列表格。
將「vertical-align：middle」應用於td元素。