如何垂直對齊div？

我有一個部分，我已經漂浮在左側和右側的內容。左邊的內容會更大，右邊（高度），所以我想要正確的內容垂直居中/對齊左邊的內容。我怎麼能做到這一點？如何垂直對齊div？

實施例圖像：

enter image description here

藍色含量會是大多h1和p和紅色的只是一個小的圖像和它下面1-2詞語。

代碼：

.inner { 
 
    background: none repeat scroll 0 0 #FFFFFF; 
 
    max-width: 576px; 
 
    width: 100%; 
 
    padding: 37px 34px 37px 34px; 
 
} 
 
.leftSide { 
 
    width: 80%; 
 
    float: left; 
 
    border-right: 1px solid #f2f2f2; 
 
} 
 
.leftSide a h1 { 
 
    font-size: 20px; 
 
    color: #3c3c3c; 
 
    text-transform: none; 
 
    font-family: 'Open Sans light'; 
 
} 
 
.leftSide span p { 
 
    font-size: 12px; 
 
    padding-top: 2px; 
 
} 
 
.leftSide .description { 
 
    font-size: 13px; 
 
    padding: 15px 0 25px 0; 
 
    color: #6a6868; 
 
    line-height: 1.4; 
 
    font-family: 'Open Sans'; 
 
} 
 
.leftSide .button { 
 
    background-color: #8D1313; 
 
    border-radius: 3px; 
 
    color: #FFFFFF; 
 
    font-family: 'Open Sans light'; 
 
    font-size: 13px; 
 
    margin-top: 20px; 
 
    padding: 7px 10px; 
 
} 
 
.rightSide { 
 
    float: right; 
 
    width: 15%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 
.rightSide p { 
 
    text-align: center; 
 
    color: #565656; 
 
    font-size: 14px; 
 
    font-family: 'Open Sans'; 
 
}

<div class="inner clearfix"> 
 

 
    <div class="leftSide"> 
 

 
    <a href="#"> 
 

 
     <h1>Jsut a simple Headline</h1> 
 

 
    </a> 
 

 
    <span> 
 
\t \t \t \t \t \t \t 
 
           <p> 15 April/4 Comments/434Views </p> 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t </span> 
 

 
    <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 

 
    <a class="button" href="#">learn more...</a> 
 

 
    </div> 
 

 
    <div class="rightSide"> 
 

 
    <img src="img/author.png" alt="author" /> 
 
    <p>J.Smith</p> 
 

 
    </div> 
 

 
</div>

來源

2014-02-27 user2013488

JSfiddle：http://jsfiddle.net/GC8F8/ – user2013488

類似的解決方案存在於http://stackoverflow.com/questions/1022795/vertically-align-floating-divs –

使用CSS 3你可以使用[flex boxes] （https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes）。它有許多功能，其中之一就是能夠垂直對齊節點。這裏是[playground]（http://demo.agektmr.com/flexbox/） –

我發現，工作的方法。你將不得不根據你的代碼來調整它。 JsFiddle here。

HTML：

<div id="myrow"> 
    <div id="content">Content<br/>alpha</div> 
    <div id="rightside">Right Side</div> 
</div>

CSS：

body { 
    font-family: sans-serif; 
    font-size: 20pt; 
    box-sizing: border-box; 
} 
#myrow { 
    vertical-align: middle; 
    width: 100%; 
    border: solid 1px black; 
    position: relative; 
} 
#myrow:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 
#content, #rightside { 
    display: inline-block; 
    float: left; 
    margin: 0 auto; 
    height: 3em; 
    text-align: center; 
    vertical-align: middle; 
    color: white; 
} 
#content { 
    width: 55%; 
    background-color: #307FFF; 
    line-height: 1.5em; 
} 
#rightside { 
    width 45%; 
    min-width: 45%; 
    background-color: #F56362; 
    line-height: 3em; 
}

行高是什麼居中文本或圖像。您可能需要調整行高以適應您的內容。

來源

2014-02-28 00:19:18

如何垂直對齊div？

回答

相關問題