Vertical Centering of H1 to image

I have a logo that is 104px tall and I’m trying to vertically center the H1 which is set to 150% and I can’t seem to figure it out. Any help would be greatly appreciated.

Hi, try this otu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vertical Align example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
img {vertical-align:middle}
</style>
</head>

<body>
<h1>Vertical align example - <img alt="example vertical align middle" src="images/pmoblogoh.jpg" width="155" height="102" />
 - Vertical align middle</h1>
</body>
</html>

OK, I tried that and it did not work. I also tried the vertical-align on the H1 still without luck. Here is the CSS and HTML I have.

HTML



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Untitled Page</title>
</head>
    <body id="home">
        <div id="header">
            <img src="images/Header_logo.gif" alt="" height="104" width="150" border="0"><h1>Intro &amp; History</h1></div>

        <div id="sidebar">
            <ul>
                <li id="sidebar-home"><a href="#">Home</a></li>
                <li id="sidebar-Intro"><a href="#">Intro &amp; History</a></li>
                <li id="sidebar-team"><a href="#">Team Members</a></li>
                <li id="sidebar-packages"><a href="#">Underwriter Packages</a></li>

                <li id="sidebar-underwriters"><a href="#">Our Underwriters</a>
                    <ul>
                        <li><a href="#">2000</a></li>
                        <li><a href="#">2001</a></li>
                        <li><a href="#">2002</a></li>
                        <li><a href="#">2003</a></li>

                        <li><a href="#">2004</a></li>
                        <li><a href="#">2005</a></li>
                        <li><a href="#">2006</a></li>
                        <li><a href="#">2007</a></li>
                        <li><a href="#">2008</a></li>
                        <li><a href="#">2009</a></li>

                        <li><a href="#">2010</a></li>
                        <li><a href="#">&nbsp;</a></li>
                    </ul>
                </li>
                <li id="sidebar-contact"><a href="#">Contact Us</a></li>
            </ul>
        </div>
        <div id="maincontent"><p><img id="img01" src="../images/BANNER.jpg" alt="" height="241" width="200" border="0">Our group consists of friends and family members who have been involved in the Houston Livestock Show &amp; Rodeo and the Houston Livestock Show &amp; Rodeo World's Championship Bar-B-Que Contest for many, many years. The Renegades were assembled in 1999, when we decided it was time to start doing things a little differently than the way they had been done in the past. The year 2000 brought not only the new Millennium, but also a renewed outlook on our approach to friendships, team work, and most of all, barbecue. As each year passes, it seems that this event as a whole gets larger. To accommodate for this growth, the Renegades expanded to provide additional space for our guests to enjoy the fun, food and activities.<img id="img02" src="../images/TEAM.jpg" alt="" height="234" width="400" border="0"></p><p>In the Summer of 1999 we set out to create and design our own trailer mounted smoker pits. They are original designs by some of the Team members and, with the combined efforts of the Renegades, the construction was completed just days prior to the big event in February 2000. Weighing in at approximately 3 tons and standing over 12 feet tall, our smoker pits are large enough to accommodate well over 600 pounds of meat, while cooking a large pot of beans or the now famous Renegades potatoes on a burner at one end.</p><p><img id="img03" src="../images/PIT.jpg" alt="" height="129" width="200" border="0">Renegades have the knowledge and experience to provide an exciting family atmosphere with plenty of fun and lots of good barbecue. The Renegades offer the ideal atmosphere to entertain your kids, friends, co-workers and even your clients. After all, everybody knows the best thing to do in February is to attend the Houston Livestock Show &amp; Rodeo World's Championship Bar-B-Que Contest. When you cross the threshold into the Renegades event, it's unlike any parking lot party you've seen before. It is a party for the senses, lights are flashing to the sound of the most current country and pop hits played by our very own Renegades disc jockey. Guests are gathered around enjoying cold beverages, and the smell of an abundance of hot food is being served from our colorful buffet tables.<img id="img04" src="../images/STORE.jpg" alt="" height="211" width="600" border="0"></p></div>

        <div id="footer">F</div>
    </body>

</html>

CSS


<style type="text/css" media="screen">
*{margin:0;padding:0;}/*Resets margins and paddings*/
body
{    font-size: 95&#37;;
    line-height: 1.5em;
    font-family: Arial, Verdana, sans-serif;
}
h1
{    
    font-size: 150%;
    font-family: Times, Georgia, serif;
}
h2
{
    font-size: 140%;
    font-family: Times, Georgia, serif;
}
h3
{    
    font-size: 130%;
    Font-family: Times, Georgia, serif;
}
h4
{    
    font-size: 120%;
    Font-family: Times, Georgia, serif;
}
h5
{    
    font-size: 110%;
    Font-family: Times, Georgia, serif;
}
#header
{
    width: 100%;/*Not needed but it couldn't hurt..yet*/
    background-color: #ff8c69;/*visual*/
}
#header img
{    margin-top: 25px;
    margin-bottom: 25px;
    vertical-align: middle;
}
#header h1
{
    margin: 0 0 0 0;
    padding-left: 175px;
}
#sidebar
{
    width: 150px;/*Width needed since it is floated*/
    float: left;/*Allow side-by-side columns*/
    background-color: #ffffff;/*Visual*/
}
#sidebar ul
{
    list-style-type: none;/*So no bullets appear*/
    width: 150px;/*Width of the <ul>*/
    overflow:hidden;/*Contain the floated <li>*/
}
#sidebar a
{
    display: block;/*Make it so it will fill the width and bigger clicking space*/
    /*width:150px; Not needed as it will fill the width anyway*/
    text-decoration: none;/*Takes away link underline*/
    color: #FFFFFF;/*Text color*/
    padding: 8px 4px 8px 4px;/*Top, Right, Bottom, Left inset*/
    background-color: #306eff;/*Color of navigation*/
    font-weight: bold;/*Bold text on navigation*/
}
#sidebar a:hover
{    background-color: #6698ff;/*Hover color*/
    color: #ffffff;/*Text color on hover*/
}
#sidebar li li
{
    width: 75px;/*Submenu is 75px each*/
    float: left;/*Floated so they are sideby side*/
    text-align:center;/*centers the text*/
}
#sidebar li li a
{    background-color: #ffffff;/*Background for submenu*/
    color: #000000;/*Black text on submenu*/
    font-weight: normal;/*Regular weight text on submenu*/
}
#sidebar li li a:hover
{    text-decoration: underline;/*Add underscore on submenu hover*/
    background-color: #ffffff;/*White background on submenu*/
    color: #000000;/*Black text on submenu hover*/
}
#maincontent
{
    background-color: #fdfdfd;/*Visual*/
    margin-left: 165px;/*Gutter between navigation and content*/
}
#maincontent #img01
{ 
    padding-left: 4px;
    float: right;
}
#maincontent #img02
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#maincontent #img03
{
    padding-left: 4px;
    float: right;
}
#maincontent #img04
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#footer
{
    background-color: #f62817;/*Visual*/
    clear:both;/*To clear the floats and appear under them*/
}
#home #sidebar-home a, #intro #sidebar-intro a, #team #sidebar-team a, #packages #sidebar-packages a, #underwriters #sidebar-underwriters a, #contact #sidebar-contact a
{   
     color: #000000;
     background-color: #00ffff;
/*declarations to style the current state*/
}
#home #sidebar-home a:hover, #intro #sidebar-intro a:hover, #team #sidebar-team a:hover, #packages #sidebar-packages a:hover, #underwriters #sidebar-underwriters a:hover, #contact #sidebar-contact a:hover
{   
     color: #000000;
     background-color: #00ffff;
/*declarations to style the hover effect of the current state*/
}
</style>


Ryan’s answer should work. But perhaps you’d like to reverse the order of image and header, like so:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vertical Align example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
img {vertical-align:middle}
</style>
</head>

<body>
[COLOR="Red"]<h1><img src="images/Header_logo.gif" alt="Logo" height="104" width="150" border="0" />Intro & History</h1>[/COLOR]
</body>
</html>

Otherwise, if you want to leave your HTML as is, you could change your CSS like this (but I wouldn’t):


#header img { 
  margin-top: 25px;
  margin-bottom: 25px;
  vertical-align: middle;
}

#header h1 {
  margin: 0 0 0 0;
  [COLOR="Red"]padding-left: 10px;
  display: inline;[/COLOR]
}

PS

I tried that and it did not work.

It’s a good idea to say what about it didn’t work, or what you experienced. It might just need a simple tweak.

I also tried the vertical-align on the H1 still without luck.

vertical-align essentially works only with inline elements like images and table cells within a row, not block elements like H1s.

HI,

As already said above the best advice is to move the image inside the h1 and change your styles as follows.


#header {
    width: 100&#37;;
    background-color: #ff8c69;/*visual*/
    padding:25px 0;
}
#header img {
    vertical-align: middle;
    margin-right:25px;
}
#header h1 {margin:0;}



<div id="header"> 
    <h1><img src="images/Header_logo.gif" alt="" height="104" width="150" border="0">Intro &amp; History</h1>
</div>


You could even lose the header div.

e.g.


#header {
    width: 100%;
    background-color: #ff8c69;/*visual*/
    padding:25px 0;
 [B]   margin:0;[/B]
}
#header img {
    vertical-align: middle;
    margin-right:25px;
}



 <h1[B] id=header"[/B]><img src="images/Header_logo.gif" alt="" height="104" width="150" border="0">Intro &amp; History</h1>

Hi, what exactly didn’t work? I took that off Pauls’ site and it worked there. I minimalized the code…

My only guess is that your example had the text before the image. But it’s still the best solution: just a matter of reversing image and text.

SHouldn’t matter if the text had a greater line-height as vertical centering only applies to the greater one.

Eitehr way I teseted it locally and it was fine. I’m quite baffled right now :).

Hi guys,

Thanks Ryan and all. I didn’t notice on the original answer that you were wrapping the image in the H1. I was unaware that this was valid, but what do I know… all of you have been doing this a lot longer and more often. Again thanks, it is working now and I learned something new.

jodmcc :slight_smile:

It’s completely valid-why wouldn’t it be ;)?

Glad it’s working now and you learned something :).