CODEWITHSUNDEEP
csslayouthtml
hankry
hankry

Reputation: 37

Center-align a div next to a float

I am trying to center-align an image inside of a div contained in a 940px width page.

<div class="header">

   <img class="logo" href="x"/>

   <ul class="topLinks">
     <li>blah</li>
   </ul>

</div>

I have the "topLinks" ul floated to the right. I would like to center the logo class relative to the entire 940px page. The only way I was able to center the logo was to use the html attribute 'align="center"' (I know it is deprecated), but it is only centered relative to the floated topLinks and not the entire page.

I am trying to get the image to be in the center of the 940px container while having the topLinks floated directly to the right of it.

Upvotes: 0

Views: 1873

Answers (2)

felipecrp
felipecrp

Reputation: 1069

The following css should center the image:

.logo {
   display: block;
   margin-left: auto;
   margin-right: auto
}

For further information check: http://www.w3.org/Style/Examples/007/center

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 77956

CSS Try:

.header img.logo { 
  margin:auto;
  clear:both;
}

.ul_wrapper {
  width:100%;
  height:auto;
  position:absolute;
}

.ul_wrapper ul.topLinks {
  float:right;
}

HTML Try: 

<div class="header">
    <img class="logo" src="x" />
    <div class="ul_wrapper">
        <ul class="topLinks">
            <li>blah</li>
        </ul>
    </div>
</div>

Upvotes: 2

Related Questions