Shazer2 Shazer2 - 2 months ago 7
CSS Question

Vertical aligning of two different sized text elements

I have two different elements, a logo and navigation. The logo is 48px but the navigation is 16px. The challenge I am facing is vertically aligning them both and then horizontally aligning them with my webpage content.

<div class="header">
<div class="logo">LOGO</div>
<ul class="nav">
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>

<div class="container">
<div class="wrapper">
CONTENT
</div>
</div>


Then in my CSS:

.header {
height: 10%;
width: 100%;

display: table;
}

.logo {
height: 100%;
display: table-cell;
vertical-align: middle;
}

.nav {
list-style: none;
margin: 0;
padding: 0;

display: table-cell;
vertical-align: middle;
}

.container {
width: 100%;
height: 90%;
display: table;
}

.wrapper {
height: 100%;

display: table-cell;
vertical-align: middle;
}


This code produces an output where both are vertically aligned but I'm not sure how to then align it with the content in the container, since the
margin
on the container is
auto
. If someone could give me some direction that would be great.

My overall goal is to align both the logo and the navigation vertically within the header but then say for example my content is 590px wide, align the logo (horizontally) to the left of that and the navigation to the right.

The output should look like

|logo| |nav |
|contentttttttttttt|


Thanks

Answer

http://jsfiddle.net/tqBUb/

The following code perfectly centers your different sized text vertically, and the total combined width of those two elements horizontally. Is this what you want? Either way this is probably a good starting point for you. The width of the header element can be changed to anything and it adjusts accordingly.

HTML

<header>
    <div class="container">
        <div class="logo">
            <span>LOGO</span>
        </div>
        <nav class="main-nav">
            <ul>
                <li>HOME</li>
                <li>ABOUT</li>
            </ul>
        </nav>
    </div>
</header>

CSS

header {
    color: #fff;
    width: 80%;
    background: blue;
}

.container {
    display: table;
    background: red;
    margin: 0 auto;
}

.logo {
    display: table-cell;
    vertical-align: middle;
}

.logo span {
    font-size: 48px;
    line-height: 1;
}

.main-nav {
    display: table-cell;
}

.main-nav ul {
    list-style-type: none;
}

.main-nav ul li {
    display: inline-block;
}

|logo|_______|nav|
|_____content____|

To achieve this format at 590px, you will need a media query breakpoint for screens widths of 590 or less. Then... just change the display: table; on .container to display: block; and the display: table-cell; div's to display: block. Then Flow the .logo div left, and float .main-nav right.