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

行高是文本或图像的中心。您可能需要调整行高以适应您的内容。