Horizontalement Centre de l'amt à l'intérieur d'un DIV

J'ai un div avec un ul à l'intérieur, je veux de centre de la ul à l'horizontale de l'écran.

Le code complet du projet peuvent être trouvés ici: jsfiddle

J'ai essayé d'utiliser:

margin: 0 auto; /* After setting the width of course */
text-align: center; /* Ran out of ideas!! */

J'ai aussi essayé le positionnement relatif et réglage de l' % au lieu de px, mais cela ne me donne pas exactement au centre de l'écran, et aussi, si j'ai ajouté plusieurs éléments de la carte, il ne serait pas être le centre à la suite notamment des articles (à l'aide d'un %).

Mon code COMPLET est en jsfiddle pour tous les vous de bricoler avec.

J'ai collé certains (ce que je pense) code ci-dessous pour votre commodité:

CSS:

/* Main*/
ul#nav { 
display: inline-block;
padding: 0px; 
list-style-type: none; 
white-space: nowrap;
position: relative;
top: 10px;
left: 10%; /* This is what im currently using, but as thought, it doesnt work as needed :(*/
border: 2px solid chocolate;
-moz-border-radius: 10px; /* Border Radius for Mozilla Firefox */
border-radius: 10px;      /* Border Radius for everything else*/
}

ul#nav li { 
float: left; 
font-family: 'Myraid Pro', Arial, Helvetica, sans-serif;  /*Use available font for menu */
font-weight: bold; 
margin: 0; 
padding: 5px 0 4px 0; 
background-color: #ee8043; /*Background Colour for the <li>*/
padding: 5px;              /* Padding for the LI */
-moz-border-radius: 8px; /* Border Radius for Mozilla Firefox */
border-radius: 8px;      /* Border Radius for everything else*/

}

HTML:

        <div id="header">
        <a href="index.html"><img id="logo" src="images/Dafne_Logo.png"/></a>

        <div id="navbar">
            <ul id="nav">
                <li><a href="index.html" rel="home">Home</a></li>
                <li class="menu_separator">|</li>
                <li><a href="index.html">News</a></li>
                <li class="menu_separator">|</li>
                <li><a href="forums.html">Forums</a></li>
                <li class="menu_separator">|</li>
                <li><a href="signup4327.html?to=%252F">Signup</a></li>
                <li class="menu_separator">|</li>
                <li><a href="login4327.html?to=%252F">Login</a></li>
                <li class="menu_separator">|</li>
            </ul>
        </div>

    </div>

    <div id="coloured_bar"></div>

Donc, fondamentalement, je veux de centre de la #nav qui est contenue à l'intérieur de la #navbar, qui est contenue dans l'en-tête#.

OriginalL'auteur | 2011-07-22

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *