Как настроить выравнивание по центру по горизонтали < UL > меню?
Установите переменную «a» на некоторое значение, подобное этому,
a=0;
Объявление и инициализация оба разные.
Удача
5 ответов
Из http://pmob.co.uk/pob/centred-float.htm :
Предполагается, что простой и в основном просто включает в себя обертку с плавающей точкой без ширины, которая перемещается влево, а затем смещается за пределы экрана влево position: relative; осталось: -50%. Затем вложенный внутренний элемент меняет местами и применяется относительное положение + 50%. Это приводит к тому, что элемент оказывается мертвым в центре. Относительное позиционирование поддерживает поток и позволяет другому контенту течь под ним.
Код
#buttons {float: right; положение: относительное; осталось: -50%; выравнивание текста: слева; } #buttons ul {стиль списка: нет; положение: относительное; осталось: 50%; } #buttons li {float: left; position: relative;} / * т.е. здесь требуется position: relative * / #buttons a {text-decoration: none; маржа: 10 пикселей; фон: красный; плыть налево; граница: 2 пикселя, начальная синяя; цвет: #fff; отступ: 2px 5px; выравнивание текста: центр; белое пространство: nowrap; } #buttons a: hover {border: 2px inset blue; color: red; background: # f2f2f2;} #content {overflow: hidden} / * скрыть горизонтальную полосу прокрутки * / Вообще говоря, для центрирования элемента уровня черного (например, ) используется свойство
margin: auto; .
Чтобы выровнять текст и встроенные элементы уровня в элементе уровня блока, используйте text-align: center; . Так что все вместе что-то вроде ...
ul {
margin:auto;
}
ul li {
text-align:center;
list-style-position:inside; /* so that the bullet points are also centered */
}
ul li div {
display:inline; /* so that the bullet points aren't above the content */
}
... должно сработать.
Дополнительным случаем является Internet Explorer6 ... или даже другие IE, если не используется . IE6 неправильно выравнивает элементы уровня блока, используя выравнивание текста . Так что, если вы хотите поддерживать IE6 (или не используете ), ваше полное решение ...
div.topmenu-design {
text-align:center;
}
div.topmenu-design ul {
margin:auto;
}
div.topmenu-design ul li {
text-align:center;
list-style-position:inside; /* so that the bullet points are also centered */
}
div.topmenu-design ul li div {
display:inline; /* so that the bullet points aren't above the content */
}
В качестве сноски, я думаю, id = "topmenu firstlevel" недействителен, поскольку атрибут id не может содержать пробелов ...? Действительно, рекомендация w3c определяет атрибут id как тип 'name' ...
токены ID и NAME должны начинаться с буква ([A-Za-z]) и может следовать на любое количество букв, цифр ([0-9]), дефисы ("-"), подчеркивания ("_"), двоеточия (":") и точки (".").
Попробуйте следующее:
div.topmenu-design ul
{
display:block;
width:600px; /* or whatever width value */
margin:0px auto;
}
У меня это работает. Если я правильно понял ваш вопрос, вы можете попробовать.
div # centerDiv {ширина: 100%; выравнивание текста: центр; граница: сплошной красный 1px; } ul.centerUL {маржа: 2px авто; высота строки: 1,4; отступ слева: 0; } .centerUL li {display: inline; выравнивание текста: центр; } - Amazon 1
< li> Amazon 2 - Amazon 3 < / a>
Сделайте это так:
<div id="footer">
<ul>
<li><a href="/1.html">Link 1</a></li>
<li><a href="/2.html">Link 2</a></li>
<li><a href="/3.html">Link 3</a></li>
<li><a href="/4.html">Link 4</a></li>
<li><a href="/5.html">Link 5</a></li>
</ul>
</div>
И CSS:
#footer {
background-color:#ccc;
height:39px;
line-height:36px;
margin:0 auto;
text-align:center;
width:950px;
}
#footer ul li {
display:inline;
font-family:Arial,sans-serif;
font-size:1em;
padding:0 2px;
text-decoration:none;
}