CSS text-align: центр; не работает
у меня есть следующий html:
<div id="footer">
<ul id="menu-utility-navigation" class="links clearfix">
<li class="menu-685 menu-site_map first">Site Map
</li>
<li class="menu-686 menu-privacy_policy">Privacy Policy
</li>
<li class="menu-687 menu-terms___conditions">Terms & Conditions
</li>
<li class="menu-688 menu-contact_us last">Contact Us
</li>
</ul>
</div>
со следующим CSS:
div#footer {
font-size: 10px;
margin: 0 auto;
text-align: center;
width: 700px;
}
Я бросил бит размера шрифта, чтобы посмотреть, работает ли стиль (Firebug сообщает, что он работает, но я хотел увидеть). Это работает. Но текст не центрирован в нижнем колонтитуле в Firefox или в Safari (еще предстоит проверить его в IE).
Я пробовал С и без поля: 0 auto; и С и без текста-align: center; комбо этих вещей не работало.
вот выкладывай из firebug:
div#footer {
font-size: 10px;
margin: 0 auto;
text-align: center;
width: 700px;
}
Inherited fromdiv#page
#skip-to-nav, #page {
line-height: 1.5em;
}
Inherited frombody.html
body {
color: #666666;
font-family: verdana,arial,sans-serif;
}
помочь?
4 ответов
Я предполагаю, что вы хотите, чтобы все элементы рядом друг с другом, и все будет центрироваться.
li
элементы display: block
по умолчанию, занимая все пространство по горизонтали.
добавить
div#footer ul li { display: inline }
как только вы это сделаете, вы, вероятно, захотите избавиться от пуль списка:
div#footer ul { list-style-type: none; padding: 0px; margin: 0px }
Если вы хотите, чтобы текст в элементах списка был центрирован, попробуйте:
ul#menu-utility-navigation {
width: 100%;
}
ul#menu-utility-navigation li {
text-align: center;
}
чтобы элемент встроенного блока выравнивал центр по горизонтали в родительском элементе, добавьте text-align:center
своему родителю.
Я не знаю, что вы используете любую версию Bootstrap, но полезный вспомогательный класс для центрирования и блокировки элемента в центре это .center-block
потому что этот класс содержит margin
и display
свойства CSS, но .text-center
класс содержит только text-align
свойства