Center logo and links on page?

HTML & CSS
1

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.


<!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>
2

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 :slight_smile:

#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 :).

3

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


#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. :slight_smile: