另一个垂直对齐CSS问题 - 另一个DIV

-1

我需要以下HTML里面两个div顶部/底部（jsfiddle）：另一个垂直对齐CSS问题 - 另一个DIV

<div class="main"> 
    <div class="top">Top</div> 
    <div class="bottom">Bottom</div> 
</div>

要看起来像这样：

不是是这样的：

来源

2015-09-04 Jerad Rose

请参阅：http://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div –

已经看过。适用于单个'div'，但不是像这样堆叠两个。 –

[小提琴]（http://jsfiddle.net/uh4nxze2/） – applesElmi

只需设置父表细胞显示：

.main { 
 
    display: table-cell; 
 
    height: 100px; 
 
    border: solid 1px; 
 
    vertical-align: middle; 
 
}

<div class="main"> 
 
    <div class="top">Top</div> 
 
    <div class="bottom">Bottom</div> 
 
</div>

来源

2015-09-04 18:41:42 j08691

非常完美，谢谢你！有一个✓为你的时间:) –

position: relative; 
top: 50%; 
transform: translateY(-50%);

来源

2015-09-04 18:34:50 Kr4ckl3s

关闭，但[不完全]（http://jsfiddle.net/q0kLojwx/2/）（我看到[那篇文章]（http://zerosixthree.se/vertical-align-anything-with-just- 3-lines-of-css /）too） –

你能改变你的HTML布局吗？

.main { 
 
    display: table; 
 
    height: 100px; 
 
    border: solid 1px; 
 
} 
 
.inner { 
 
    display:table-cell; 
 
    vertical-align:middle 
 
} 
 
.top, .bottom {background:yellow;}

<div class="main"> 
 
    <div class="inner"> 
 
     <div class="top">Top</div> 
 
     <div class="bottom">Bottom</div> 
 
    </div> 
 
</div>

检查这下面。

来源

2015-09-04 18:38:48

HTML：

<div class="main"> 
    <div class="wrapper"> 
     <div class="top">Top</div> 
     <div class="bottom">Bottom</div> 
    </div> 
</div>

CSS：

.main { 
    display: inline-block; 
    height: 100px; 
    border: solid 1px; 
    line-height: 100px; 
    vertical-align: middle; 
} 

.wrapper { 
    line-height: 1em; 
    display: inline-block; 
    vertical-align: middle; 
}

DEMO：https://jsfiddle.net/q0kLojwx/5/

来源

2015-09-04 18:44:34

另一个垂直对齐CSS问题 - 另一个DIV

回答

相关问题