如何垂直對齊div？

Question

我有一個部分，在左右浮動內容。 左邊的內容要大於右邊的內容（在高度上），因此我希望右邊的內容垂直居中/對齊左邊的內容。 我該怎么做？

示例圖片：

藍色的內容主要是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> <p> 15 April / 4 Comments / 434Views </p> </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> 

Answer 1

我找到了一種有效的方法。 您將不得不根據您的代碼進行調整。 JsFiddle在這里 。

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;
}

行高是文本或圖像居中的位置。 您可能需要調整行高以容納您的內容。