Выравнивание по центру списка

Gleb-k · January 3, 2011

Есть меню, пытался выравнить текст по центру, в итоге в фф и опере ничего не получилось.

Подскажите.

html

 <div id="nav_green"> 

 <div id="left_green"></div>

 <div id="right_green"></div>

<div id="menu_green">

		 <ul id="nav_ul">

		   <li class="nav_top_li"><a class="nav_li" href="#">Уход за волосами</a></li>

		   <li class="nav_top_li">|<a class="nav_li" href="#">Стайлинг</a></li>

		   <li class="nav_top_li">|<a class="nav_li" href="#">Уход за лицом</a></li>

		   <li class="nav_top_li">|<a class="nav_li" href="#">Уход за телом</a></li>

		   <li class="nav_top_li">|<a class="nav_li" href="#">Уход за руками и ногтями</a></li>

		   <li class="nav_top_li">|<a class="nav_li" href="#">Акссесуары и техника</a></li>

		 </ul>			

</div>	

</div>

css

.nav_top_li{

	margin:0px;

	margin-left:10px;

	padding:0px;

	display:inline;

}

.nav_top_a{

	color:#607902;

	text-decoration:none;

}

#nav_green{

	margin:0px;

	padding:0px;

	height:38px;

	background-image:url(images/green_line.jpg);

	background-repeat:repeat-x;

}

*html #nav_green{

	margin-top:-20px;

}

*:first-child+html #nav_green{

	margin-top:-1px;

}

#left_green{

	margin:0px;

	padding:0px;

	background-image:url(images/left_green.png);

	background-repeat:no-repeat;

	width:19px;

	height:38px;

	float:left;

}

#right_green{

	margin:0px;

	padding:0px;

	background-image:url(images/rigth_green.png);

	background-repeat:no-repeat;

	width:16px;

	height:38px;

	float:right;

}



#menu_green{

	margin:0px;

	margin-top:-1px;

	margin-left:0px;

	padding:0px;

	padding-top:10px;

	height:18px;

	width:100%;

}



*html #menu_green{

	margin:0px;

	margin-top:-25px;

	padding:0px;

}

#nav_ul{

	margin:0px;

	margin-left:20px;	

	padding:0px;

	font-family:Arial, Helvetica, sans-serif;

	font-size:14px;

	font-weight:bold;

	display:inline;

	width:90%;

}

*:first-child+html #nav_ul{

	position:absolute;

	margin:0px;

	margin-top:-35px;

	margin-left:20px;	

	padding:0px;

}

Заранее спасибо)

Shift-Web · January 3, 2011

li.nav_top_li { text-align: center; }

Gleb-k · January 3, 2011

li.nav_top_li { text-align: center; }

Пробывал уже.

Только в ие вырванивает. ff, Opera - 0 реакции.

Temiks · January 3, 2011

в сам ul или li

к тегу a нужно ровнять

Gleb-k · January 3, 2011

Пробывал, не прокатила.

Вообще text-align:center - бесполезна тут(кроме ie )

Temiks · January 3, 2011

не правда, вот смотрите, у меня то выравнивает

<html>
  <head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style type="text/css" >
		ul {
			width: 300px;
			background-color: red;
}
li {
	text-align: center
}
	</style>
  </head>
  <body>
	  <ul>
		  <li>
			  <a href="#">Главная</a>
		  </li>
		  <li>
			  <a href="#">Главная</a>
		  </li>
	  </ul>
  </body>
</html>

в вашем случаи нужно указать тегу а padding-left !!!!

Edited January 3, 2011 by Temiks

Gleb-k · January 3, 2011

не правда, вот смотрите, у меня то выравнивает

<html>
  <head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style type="text/css" >
		ul {
			width: 300px;
			background-color: red;
}
li {
	text-align: center
}
	</style>
  </head>
  <body>
	  <ul>
		  <li>
			  <a href="#">Главная</a>
		  </li>
		  <li>
			  <a href="#">Главная</a>
		  </li>
	  </ul>
  </body>
</html>

в вашем случаи нужно указать тегу а padding-left !!!!

Да в вашем работает, но в моем, то не много все сложней, возможно поэтому и не работает. (я пробывал, то что вы предлагаете, не получается)

Temiks · January 3, 2011

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style type="text/css" >
.nav_top_li{

	margin:0px;

	margin-left:10px;

	padding:0px;

	display:inline;

}

.nav_top_a{

	color:#607902;

	text-decoration:none;

}

#nav_green{

	margin:0px;

	padding:0px;

	height:38px;

	background-image:url(images/green_line.jpg);

	background-repeat:repeat-x;

}

*html #nav_green{

	margin-top:-20px;

}

*:first-child+html #nav_green{

	margin-top:-1px;

}

#left_green{

	margin:0px;

	padding:0px;

	background-image:url(images/left_green.png);

	background-repeat:no-repeat;

	width:19px;

	height:38px;

	float:left;

}

#right_green{

	margin:0px;

	padding:0px;

	background-image:url(images/rigth_green.png);

	background-repeat:no-repeat;

	width:16px;

	height:38px;

	float:right;

}



#menu_green{

	margin:0px;

	margin-top:-1px;

	margin-left:0px;

	padding:0px;

	padding-top:10px;

	height:18px;

	width:100%;

}



*html #menu_green{

	margin:0px;

	margin-top:-25px;

	padding:0px;

}

#nav_ul{

	margin:0px;

	margin-left:20px;

	padding:0px;

	font-family:Arial, Helvetica, sans-serif;

	font-size:14px;

	font-weight:bold;

	display:inline;

	width:90%;

}

*:first-child+html #nav_ul{

	position:absolute;

	margin:0px;

	margin-top:-35px;

	margin-left:20px;

	padding:0px;

}
a {
	padding-left: 10px;
}

	</style>
  </head>
  <body>
	  <div id="nav_green">

<div id="left_green"></div>

<div id="right_green"></div>

<div id="menu_green">

		 <ul id="nav_ul">

		   <li class="nav_top_li"><a class="nav_li" href="#">Уход за волосами</a></li>

		   <li class="nav_top_li">|<a class="nav_li" href="#">Стайлинг</a></li>

		   <li class="nav_top_li">|<a class="nav_li" href="#">Уход за лицом</a></li>

		   <li class="nav_top_li">|<a class="nav_li" href="#">Уход за телом</a></li>

		   <li class="nav_top_li">|<a class="nav_li" href="#">Уход за руками и ногтями</a></li>

		   <li class="nav_top_li">|<a class="nav_li" href="#">Акссесуары и техника</a></li>

		 </ul>

</div>

</div>


  </body>
</html>

у меня то и это уже работает!

Gleb-k · January 3, 2011

у меня то и это уже работает!

В каком ты браузере смотришь и при каком разрешение экрана?

Shift-Web · January 3, 2011

#menu_green ul#nav_ul li.nav_top_li { text-align: center !important ;}

так точно прокатит ;D

Gleb-k · January 3, 2011

Спасибо с !important прокатило)))

Shift-Web · January 3, 2011

Покурите приоритеты

Gleb-k · January 3, 2011

а кто теперь подскажет хак для opera 11 ?)))

Temiks · January 3, 2011

В каком ты браузере смотришь и при каком разрешение экрана?

В ФФ и ИЕ 1280х1024

Akmal · September 26, 2011

У меня аналогичная проблема!

Вот мой код:

<div id="menu">
<ul>
<li>

И CSS:

#menu {
margin-top: 5px;
border:1px solid;
text-align: center;
background: url(menu.jpg);
background-repeat: repeat-x;
padding:inherit;
height: 45px;
}

#menu ul {
width: 700px;
text-align: center !important;
margin: 0 auto;
padding: 4px;
}
#menu li {
margin: 0 auto;
text-align: center !important;
float:left;
list-style-type:none;
padding: 4px;
}

#menu li a {
display: block;
color: white;
text-decoration: none;
font-weight: 700;
font-size: medium;
font-family:sans-serif;
}
#menu a:hover {
color: #8B8989;
}

/**** Для выпадающего меню ****/
#menu ul li ul{
margin: 0 auto;
display: none;
}

#menu ul li:hover ul{
width: 120px;
background: url(menu_2.jpg) no-repeat;
position: absolute;
display: block;
margin-left: 0px;
margin-top: 1px;
}

#menu ul li:hover ul a{
font-weight: 500;
font-size: small;
font-family:sans-serif;
color: #d9d6d6;
}

#menu ul li:hover ul a:hover{
color: white;
}


/** END menu **/

И, как видно, text-align: center !important; не помогает!

Подскажите решение, плиз!

Edited September 27, 2011 by Akmal

Vlad · September 27, 2011

Обрамляйте код тегами [ code ] и [ /code ] без пробелов!

Akmal · September 27, 2011

Ок, извиняюсь

А как на счёт решения? Неужели никто не может помочь??

Sign In

Выравнивание по центру списка

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information