css中的垂直對齊方式

我正在使用引導程序。這裏是我使用的代碼示例。css中的垂直對齊方式

<div class="row"> 
    <div class="col-lg-6"><img src="#" alt=""></div> 
    <div class="col-lg-6"> 
     <h2>Heading</h2> 
     <p>Some Text</p> 
     <p>Some more text</p> 
    </div> 
</div>

這些p標籤有多行文字。左側的圖像比文字區域大得多，所以我希望這些元素垂直對齊。這是我曾嘗試：

1. The table/table-cell trick. 
2. The transform/Translatey trick. 
3. Setting margin-top to 50% (didn't think that would work). 
4. flex and align-items/justify-content.

問題是這樣的，父元素不會有高度，所以每一個解決方案，我發現通過網上和StackOverflow上似乎並沒有爲我工作。我很欣賞這方面的任何幫助。任何幫助將不勝感激。

在此先感謝

來源

2016-11-08 A. Wilkinson

如果你可以用這些段落爲div那麼你可以使用下面的解決方案。 col-lg-6更改爲col-xs-6只是爲了在代碼段中顯示左右佈局。

.outer { 
 
    display: flex; 
 
    align-items: stretch; 
 
} 
 

 
.middle { 
 
    display: flex; 
 
    align-items: center; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="row outer"> 
 
    <div class="col-xs-6 middle"><img src="https://s-media-cache-ak0.pinimg.com/236x/f6/16/d0/f616d044c7937dde2e8ec2b4f3e6f79c.jpg" alt=""></div> 
 
    <div class="col-xs-6 middle"> 
 
     <div class="inner"> 
 
     <h2>Heading</h2> 
 
     <p>Some Text</p> 
 
     <p>Some more text</p> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>

來源

2016-11-08 05:23:52

css中的垂直對齊方式

回答

相關問題