Yet another vertical align CSS issue - two divs top/bottom inside another div

Question

I need the following HTML (jsfiddle):

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

To look something like this:

Not like this:

See this: http://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div — Chris Yongchu, Sep 04 '15 at 18:29
Already looked at that. Works for a single `div`, but not two stacked like this. — Jerad Rose, Sep 04 '15 at 18:33
Is there any special reason for setting the height.? if not, remove height and put the padding. — CodeRomeos, Sep 04 '15 at 18:50
People are down-voting because the solution is the same for other problems, which is e.g. using `display:table` however the case here is different and deserves it's own question because that's what users search for. — Jesse Nickles, Oct 06 '22 at 09:10

score 2 · Answer 1 · answered Sep 04 '15 at 18:38

2

Can you change your HTML layout a little ?

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

Check this below.

answered Sep 04 '15 at 18:38

Deepak Yadav

6,804
5
31
49

This is the better answer, because the parent div should be `display:table` otherwise kinda goofy for child div to use `display:table-cell` ... – Jesse Nickles Oct 06 '22 at 09:08

score 1 · Accepted Answer · answered Sep 04 '15 at 18:41

1

Just set the display of the parent to table-cell:

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

answered Sep 04 '15 at 18:41

j08691

204,283
31
260
272

Perfect, thanks for that! Have a ✓ for your time. :) – Jerad Rose Sep 04 '15 at 18:53

score 0 · Answer 3 · answered Sep 04 '15 at 18:34

0

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

answered Sep 04 '15 at 18:34

Close, but [not quite](http://jsfiddle.net/q0kLojwx/2/) (I saw [that article](http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/) too). – Jerad Rose Sep 04 '15 at 18:37

score 0 · Answer 4 · answered Sep 04 '15 at 18:44

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/

Yet another vertical align CSS issue - two divs top/bottom inside another div

4 Answers4