如何垂直对齐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;
}

行高是文本或图像居中的位置。 您可能需要调整行高以容纳您的内容。