如何使等號列高度和垂直對齊文本：使用Bootstrap 3（響應）的div中間？不需要顯示錶或flex。如果可能

Question

找不到解決方案。 我有兩列的行。一個與img，另一個與文本。 我找到關於等高兩列的解決方案。另外我想垂直對齊div中的文本。我嘗試了一些方法，但沒有奏效。請幫幫忙。這是圖像 - - what I have

what I need

Answer 1

這個CSS類將使你列的高度相同。 要居中的圖像，你可以使用柔性，align-items: center像.center-img

.row-eq-height{ 
 
    display:-webkit-box; 
 
    display:-ms-flexbox; 
 
    display:flex; 
 
    border:1px solid blue; 
 
} 
 

 
div.center-img { 
 
    border:2px solid red; 
 
    display:flex; 
 
    align-items:center; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row row-eq-height"> 
 
    <div class="col-md-6"> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
    </div> 
 
    <div class="col-md-6 center-img"> 
 
     <img src="https://i.stack.imgur.com/vo8VJ.jpg?s=64&g=1" /> 
 
    </div> 
 
</div>