How do I vertically align two divs?

Question

I realize there are many questions like this about this issue, but I could not find any that would suit my needs. My template's header will have a "banner" which will contain two floated divs: the branding which would be the site name and slogan; and then an advertisement. I would like my advertisement to be vertically aligned with the branding. I have tried the table display method but nothing is working. Here is a jsFiddle

HTML:

<div id="banner">
    <div class="container">
        <div id="branding">
            <h1>Site Name</h1>
            <p>Your catchy slogan goes here.</p>
        </div>
        <div id="advert">
            <div class="advert">
                <h1>Your advertisement could be here!</h1>
            </div>
        </div>
    </div>
</div>

CSS:

#banner {
    background: #C1CE96;
    padding: 0;
    margin: 0;
    width: 100%;
    display: table;
    height: 10%;
    position: relative;
}

#banner #branding {
    padding: 10px;
    float: left;
    display: table-cell;
    vertical-align: middle;
}
#banner #branding h1 {
    font-size: 1.5em;
    color: #484A47;
}
#banner #branding p {
    font-size: 1em;
}

#banner #advert {
    float: right;
    vertical-align: middle;
    display: table-cell;
}

.advert {
    width: 468px;
    height: 60px;
    background: #fff;
    border: 1px solid #484A47;
    text-align: center;
}
.advert h1 {
    font-size: 1em;
}

score 2 · Answer 1 · answered Oct 27 '15 at 07:23

2

You can do that with the display: table; display: table-cell; properties.
Here is a fiddle.

You forgot the display: table; on the #banner div

And you dont need any float here!

answered Oct 27 '15 at 07:23

chris

4,827
6
35
53

I removed the floats from the branding and advert divs and that fixed the vertical alignment, but doing so put the advert directly to the left of the branding. I would like it to be on the right edge of the container. (bootstrap's container class) – ShoeLace1291 Oct 27 '15 at 07:45
@ShoeLace1291 I think this would be a good solution for you! http://stackoverflow.com/a/5195902/1364685 – chris Oct 27 '15 at 07:54

score 1 · Answer 2 · answered Oct 27 '15 at 07:25

This could be out of the context. But I am sharing this for the people who struggle with vertically middle aligning divs

This CSS would help you

.parent-div{
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.div-that-needs-to-be-vertically-middle-aligned{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

How do I vertically align two divs?

2 Answers2