Centre a ul vertically inside a div

Hi everyone,

I have a ul inside a div and need to center it vertically within the div. The css currently is as follows:

div#nav_main {
position: absolute;
top: 101px;
right: 0;
width: 812px;
height: 37px;
background-color: #be1e2d;
padding-left: 10px;
}

div#nav_main h3 {
position: absolute;
top: -9999px;
}

div#nav_main ul {
height: 37px;
line-height: 37px;
background-color: #969;
}


div#nav_main li {
display: inline;
width: auto;
height: 37px;
margin-right: 0.5em;
padding-right: 0.75em;
border-right: 1px solid #fff;
font-weight: bold;
text-align: center;
background-color: #FF3;
}

div#nav_main a {
line-height: 20px;
font-weight: bold;
color: #fff;
text-decoration: none;
background-color: #0F0;
}

I wondered if someone could tell me how to do this?

Thanks in advance.

Oh yeah - it’s actually working now. Could have been because I commented out some code earlier and forgot to uncomment.

Could I ask another question? How do I set the links globally? I’ve found that if I specifically set a rule for a particular as follows that this works but only for the links in that div:

div#content_main a:link, div#content_main a:visited  {
	color: #be1e2d;
}

div#content_main a:hover, div#content_main a:active  {
	color: #3e6233;
}

So then I need to set another lot of rules for say the site_info at the bottom of the page separately.

Is there a way to just set the links for the whole site?

Well, closer to the top of your stylesheet, you could have

a {
styles;
}

a:visited {
styles;
}/only mention if you want visited styles/

a:focus, a:hover, a:active {
styles;
}

then your current styles will override the global styles because they are more specific:
div#content_main a:link, div#content_main a:visited

“a” alone can set styles for all the :pseudoclass versions, which is nice because then you only need to mention the :pseudoclass versions for what you want different.

Like if the only difference between regular and hovered/focussed links is an underline, then “a” has all the styles and then :hover and :focus have just the line about the text-decoration.

Hi,

We must be looking at different things because the anchors are perfectly centred within the ul with a 9px space above and below in firefox and IE.

The ul itself is offset because you haven’t reduce the top and bottom margins as I mentioned in my first post.

I think you must mean something else but I’m not sure what :slight_smile:

Just to clarify, I’m trying to get the links which are inside the li elements which are inside the ul to center vertically. I thought that if I centered the ul then the others would be centered too but this has happened.

Thanks for the reply,

The following is the html for the page.

I thought that if I made the ul the same height as the div that it would center but it doesn’t.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled</title>

<link href="css/screen.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="outerWrapper">
  <div id="branding">

  <h1><a href="index.php">Site</a></h1>
  <p id="tagline">Tagline goes here</p>
  
  <div id="enquiries">
    <h2>Enquiries &amp; Bookings</h2>
    <p>000 000 000</p>
  </div>
  <div id="nav_main">
    <h3>Site areas </h3>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Amenities</a></li>
      <li><a href="#">Tarrifs</a></li>a
      <li><a href="#">Local Attractions</a></li>
      <li><a href="#">Contact Us</a></li>
      <li id="last"><a href="#">Location Map</a></li>
      </ul>
  </div>
</div>
  <div id="content_main">
    <div id="content_wrapper">
  <ul>
    <li id="about_us"><h3>About</h3>
      <p class="first_para">Lupitia tatquis eic tecto ipicate ctenducia quatibusdae dolorro velecaeribea verio maiorep eritium auda cullect ectatius que in ratiur ma vel int es reium, cor reius et volore plabore cus iust aruptatem vendam volorpo rporporio</p>
      <p><a href="#">Learn more…</a></p></li>
    
    <li id="amenities"><h3>Amenities</h3>
      <p class="first_para">Lupitia tatquis eic tecto ipicate ctenducia quatibusdae dolorro velecaeribea verio maiorep eritium auda cullect ectatius que in ratiur ma vel int es reium, cor reius et volore plabore cus iust aruptatem vendam volorpo rporporio</p>
      <p><a href="#">Learn more…</a></p></li>
    
    <li id="attractions"><h3>Local Attractions</h3>
      <p class="first_para">Lupitia tatquis eic tecto ipicate ctenducia quatibusdae dolorro velecaeribea verio maiorep eritium auda cullect ectatius que in ratiur ma vel int es reium, cor reius et volore plabore cus iust aruptatem vendam volorpo rporporio</p>
      <p><a href="#">Learn more…</a></p></li>
    
        <li id="bookings"><h3>Bookings</h3>
      <p class="first_para">Lupitia tatquis eic tecto ipicate ctenducia quatibusdae dolorro velecaeribea verio maiorep eritium auda cullect ectatius que in ratiur ma vel int es reium, cor reius et volore plabore cus iust aruptatem vendam volorpo rporporio</p>
      <p><a href="#">Learn more…</a></p></li>
    
  </ul>
    </div>
  </div>
  <div id="site_info">
    <p>© 2010, All Rights Reserved.&nbsp; &nbsp;<a href="#">Privacy policy</a> &nbsp; &nbsp;|&nbsp; &nbsp;<a href="#">Terms and conditions</a></p>
    <h4 id="brochure"><a href="#">Download brochure</a></h4>
  </div>
</div>
</body>
</html>

Hi,

I’d need to see the html that goes with that or a link to the page.

Looking at the css is seems that your ul is already centred. The div is 37px high and the ul is 37px high therefore it is already centred (assuming you have removed the top and bottom margins form the ul).

I think we need a little more information.:slight_smile:

That’s perfect. Thanks so much.