18041 sujets

Questions générales et questions de débutants

Centrer ul horizontalement

Bonjour,

Je recherche une solution à mon problème qui me paraît banal (centrage horizontal d'un menu en ul), mais pourtant...

J'ai opté pour cette solution... Simplement, font-size à 1.1em rend l'écriture floue (pourquoi ?) :

#nav {
	float: right;
	position: relative;
	left: -50%;
	text-align: left;
}

ul.menu_nav {
	list-style: none; 
	position: relative;
	left: 50%;
}

ul.menu_nav li {
	float: left;
	position: relative;
}

.menu_nav li a {
	text-decoration: none;
	padding: 5px;
	color: white;
	float: left;
	text-align: center;
	white-space: nowrap;
	font-family: "Airstrip Four";
	font-size: 1.1em;
}

Auparavant, en fixant "à vue d'oeil" le "width" et mettant "margin: 0 auto;", j'ai réussi à centrer mon ul, mais j'aimerais trouver une solution qui me permette de ne pas utiliser ce genre de calcul hasardeux.

J'ai décidé d'éviter la propriété display: table-row ou autres pour des raisons de comptatibilité avec IE (si je ne me trompe pas).

Merci pour vos réponses et bonne après-midi,

Kinkaz
Modifié par kinkaz (26 Sep 2011 - 17:37)
<div id="nav">

<ul class="menu_nav">

<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>

</ul>

</div>

<div class="clear"></div>


Merci !
Modifié par kinkaz (26 Sep 2011 - 17:37)
Bonjour,

Souhaites-tu center le menu et chaque entrée du menu ?

Si c'est le cas:

<ul id="nav">
    <li><a href="plop1">Item 1</a></li>
    <li><a href="plop2">Item 2</a></li>
    <li><a href="plop3">Item 3</a></li>
    <li><a href="plop4">Item 4</a></li>
</ul>



#nav{
	width:960px;
	margin:0 auto;/*centrage marges automatiques*/
	padding:5px 0;
	background:#bcbcbc;
	text-align:center;/*centre les inline qu'il contient*/
    }
    #nav li{
	display:inline;/*de list-item à inline*/
    }
    #nav a{
	display:inline-block;
	margin-left:5px;
	padding: 5px 10px;
	text-decoration:none;
	background:#F8F8F8;
    }
    #nav a:hover, #nav a:focus{
	background:#fff;
	text-decoration:underline;
    }


ps: penses à modifier tes posts pour présenter plus lisiblement ton code en utilisant les boutons appropriés
Modifié par Igor (26 Sep 2011 - 17:23)
Sujet clos
Aller à