Clever Geek Handbook

How to center alignment of a div containing floats without fixed width

I have a ul menu inside a div wrapper. each li element is float: left (this is a horizontal menu). I want to center the menu in my page container (about 1100px), but I don't know what size the menu will be, so I cannot use "margin: 0 auto".

I've tried a lot of different things, but I just can't seem to get this to work.

This is a menu in wordpress, so the ul and wrapper div markup is generated by wordpress. prefers not to interfere with it ...

+3


source to share


3 answers


You can define your container display:inline-block

and align the text in the center of the container by setting a property text-align:center

like:

CSS



.nav > li {
    display:inline-block;
    *display:inline; /* ie7 fix */
    zoom:1; /* hasLayout ie7 trigger */
}

.nav {
    text-align:center;
}
+7


source


It's better to use the property for this display:inline-block

. eg:

body{
    text-align:center;
}
.parent{
    text-align:left;
    background:red;
    display:inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
}


Check it out http://jsfiddle.net/pJs6e/2/

+4


source 


 <div style="position: relative; width:100%">
    <div style="position: relative; left: 50%; float: left;">
      <div style="position: relative;   right: 50%;">

        <!-- the image width is unknown -->
        <img src="https://react-bootstrap.github.io/assets/logo.png" />
      </div>
    </div> 
  </div>

https://jsbin.com/miteliwafu/edit?html,output

0


source






More articles:


All Articles