• Locked
1 reply [Last post]
Mon, 2013-03-04 18:24
ljCharlie
Offline
Enthusiast
Last seen: 6 years 4 weeks ago
Timezone: GMT-5
Joined: 2005-04-11
Posts: 66
Points: 29

I'm trying to center my header vertically but for some reason it's not. I have tried my code in the w3school.com site and I couldn't figure out why. Below are my code:

<!DOCTYPE html>
<html>
<head>
<style>
.cf:before, .cf:after
{
    content: "";
    display: table;
}
.cf:after
{
    clear: both;
}
header
{
background-color: #91CFF4;
}
#banner
{
    color: #FFFFFF;
    font-family: "Franklin Gothic Medium","Franklin Gothic",WebFont,sans-serif;
    font-weight: normal;
    text-align:center;    
    height: 5em;
}
    #banner h1
    {
        display:block;
        line-height: 5em;
        font-size: 1.2em;
    }
</style>
</head>
 
<body>
<header class="cf">
<div id="banner">
<h1>This is my Page Title</h1>
</div>                    
</header>
</body>
</html>

Any help is much appreciated.

Top
Tags:
Mon, 2013-03-04 22:29
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

It's basically simple

Now that IE has joined the the modern world, it's pretty straightforward to center vertically.

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8"
          http-equiv="Content-Type" />
 
    <title>test doc</title>
 
    <!-- hack for bug in Web Developer addon for Firefox -->
    <link rel="stylesheet"
	  type="text/css"
	  href="x" />
 
    <base href="http://www.create-n-communicate.nl/pwg/index.php/en/" />
 
    <style type="text/css">
 
      header {
        background-color: #91CFF4;
        display: table;
        width: 100%;
        }
 
      #banner {
        display: table-cell;
        height: 5em;
        vertical-align: middle;
        }
 
      #banner h1 {
        background-color: yellow;
        color: blue;
        font-size: 1.2em;
        text-align:center;    
        }
 
    </style>
  </head>
 
  <body>
    <header class="cf">
      <div id="banner">
	<h1>This is my Page Title</h1>
      </div>                    
    </header>
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
  • Locked