2015-09-04 86 views
-1

我需要以下HTML裏面兩個div頂部/底部(jsfiddle):另一個垂直對齊CSS問題 - 另一個DIV

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

要看起來像這樣:

enter image description here

不是是這樣的:

enter image description here

+1

請參閱:http://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div –

+0

已經看過。適用於單個'div',但不是像這樣堆疊兩個。 –

+0

[小提琴](http://jsfiddle.net/uh4nxze2/) – applesElmi

回答

1

只需設置父表細胞顯示:

.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>

+0

非常完美,謝謝你!有一個✓爲你的時間:) –

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

關閉,但[不完全](http://jsfiddle.net/q0kLojwx/2/)(我看到[那篇文章](http://zerosixthree.se/vertical-align-anything-with-just- 3-lines-of-css /)too) –

1

你能改變你的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>

檢查這下面。

0

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/