CODEWITHSUNDEEP
htmlcssfontsalignment
user1284664
user1284664

Reputation: 63

Vertically align two pieces of text with different font-sizes using CSS

At the top of my page I want to have the title of the page aligned to the left of the screen with a short nav menu aligned to the right of the screen. I can achieve this using float but the two elements have different baslines i.e. the baseline of the text appears different. Is there any way to get this to work using css? I have a sample of what I'm trying to do up on jsfiddle http://jsfiddle.net/nBPCG/63/

Upvotes: 6

Views: 4343

Answers (2)

Shailender Arora
Shailender Arora

Reputation: 7778

Hi you can use display:inline-block in your h1

or see the Fiddle:- http://jsfiddle.net/nBPCG/101/

Upvotes: 1

steveax
steveax

Reputation: 17753

First I'd suggest using a ul to wrap the links rather than an h3, that structure doesn't make sense. Then I'd just add some padding to the ul. Here's a cleaned up example of the markup:

<article >
<header>
    <h1>This is Title</h1>
    <nav>
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Works</a></li>
            <li><a href="">Blog</a></li>
            <li><a href="">Contact</a></li>  
        </ul>
    </nav>
    <div class="clr"></div>
</header>
</article>

And the styles:

body {
    font-family:"Verdana", Verdana, sans-serif;
    font-size: 1em;
    font-weight:400;
}

h1 {
    font-family:"Century Gothic", Verdana, sans-serif;
    font-size: 4em;
    font-weight:400;
    float: left;
    margin-left:10px;
}

header nav {
    margin-right: 10px;
    float: right;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 2em 0 0 0;
}

nav ul li {
    display: inline;
    font-size: 1.2em;
    font-weight:400;
}

nav a {
    padding: 0 1em;
    border-right: 1px solid #000;
}

nav li:last-child a {
    padding-right: 0;
    border-right: none;
}

.clr {clear:both;}

Fiddle: http://jsfiddle.net/nBPCG/98/

Upvotes: 0

Related Questions