-2

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:

enter image description here

Not like this:

enter image description here

Jerad Rose
  • 14,855
  • 17
  • 79
  • 150
  • 1
    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
  • [Fiddle](http://jsfiddle.net/uh4nxze2/) – applesElmi Sep 04 '15 at 18:36
  • 1
    Wow, what's with all the downvotes? This is a pretty straight-forward question with a provided example. I know it's a common problem, but I couldn't find a solution that fit this case. – Jerad Rose Sep 04 '15 at 18:42
  • 1
    @JeradRose haters gonna hate :( FYI, i didnt downvote – Andrew Sep 04 '15 at 18:46
  • Yeah, just not sure why it drew hate to begin with. I know I didn't provide any "I tried this" other than what's in the jsfiddle link, but I honestly tried so many possibilities, I don't remember all of them, and this post would blow up if I listed them all. *shrug* – Jerad Rose Sep 04 '15 at 18:48
  • Is there any special reason for setting the height.? if not, remove height and put the padding. – CodeRomeos Sep 04 '15 at 18:50

4 Answers4

1

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.

Deepak Yadav
  • 6,448
  • 5
  • 27
  • 47
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>
j08691
  • 197,815
  • 30
  • 248
  • 265
0
position: relative;
top: 50%;
transform: translateY(-50%);
  • 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
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/

Soheil Jadidian
  • 868
  • 7
  • 12