Center logo and links on page?

**ttmt** · Mar 27, 2012 09:16

Center logo and links on page?

Hi all

http://www.ttmt.org.uk/forum/center/

Another simple one but my brain won't work.

I have a div that contains a <a> with an image inside.

The div also has a <ul> which contains two links.

I need the links next to the image and both the image and links centered in the page.

I can't work it out.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
  
  <style type="text/css" media="screen">
    *{
      margin:0;
      padding:0;
    }
    li{
      text-decoration:none;
    }
    #wrap{
      margin:50px auto 0 auto;
    }
    #logo{
      float:left;
      text-align:center;
    }
    ul li{
      display:inline;
    }
    ul li a{
      float:left;
      display:block;
      background:red;
      padding:5px;
      margin:0 0 0 5px;
      text-decoration:none;
      color:#fff;
      font-weight:bold;
    }
    ul li a:hover{
      background:#000;
    }
  </style>

</head>

<body>

  <div id="wrap">
    <a href="#" id="logo"><img src="logo.png" alt="" /></a>
    <ul>
      <li><a href="">Link One</a></li>
      <li><a href="">Link Two</a></li>
    </ul>
  </div><!-- #wrap -->

</body>

</html>

**RyanReese** · Mar 27, 2012 09:31

Hi, you almost have the right idea

. Your major flaw is that the #wrap has failed to contain the floats.

Also in order to auto margin something, to horizontally center, it must have a width attached also (and it needs to be have a fix in the above link, if you have floats as children)

Try adding the code below

Code:

#wrap{width:50%;overflow:hidden;}

I don't know how the rest of your apge is going to be structured, so #wraps width will for sure need to be enlarged, but you see the general idea being workedthere

.

**jwmollman** · Mar 28, 2012 14:51

On your <div id="wrap">, you could try applying the following styles:

Code:

#wrap {
    width: 506px;
    margin: 50px auto 0 auto;
    text-align: center;
}

That seems to keep your logo, along with the <ul> and links centered on the page. Hopefully that helps.

User Tag List

Thread: Center logo and links on page?

Thread Tools

Display

Center logo and links on page?

Bookmarks

Bookmarks

Posting Permissions