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

回答

相关问题