Как горизонтально центрировать выравнивание ul в div

Я не уверен, почему этот центр выравнивания текста не вступает в силу. Я искал другие уроки, и я применяю textalign: center к div, а затем display: inline к ul.Как горизонтально центрировать выравнивание ul в div

Вот копия моего кода HTML из браузера при проверке элемента как Im, фактически создающего тему WordPress.

#footer-nav.collapse.navbar-collapse { 
 
    text-align: center; 
 
    font-size: 16px; 
 
    color: #383434; 
 
    margin-top: 30px; 
 
    margin-bottom: 30px 
 
} 
 
div#footer-nav ul#menu-footer { 
 
    display: inline-block; 
 
} 
 
ul#menu-footer li { 
 
    padding: 0px 15px 0px 15px; 
 
}

<div id="footer-nav" class="collapse navbar-collapse"> 
 
    <ul id="menu-footer" class="nav navbar-nav"> 
 
    <li id="menu-item-289" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-289"><a title="About" href="http://localhost/eat-sleep-kayak-wp/about/">About</a> 
 
    </li> 
 
    <li id="menu-item-366" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-305 current_page_item current_page_parent menu-item-366 active"><a title="Blog" href="http://localhost/eat-sleep-kayak-wp/blog/">Blog</a> 
 
    </li> 
 
    <li id="menu-item-290" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-290"><a title="Newsletter" href="http://localhost/eat-sleep-kayak-wp/newsletter/">Newsletter</a> 
 
    </li> 
 
    <li id="menu-item-365" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-365"><a title="Advertise" href="http://localhost/eat-sleep-kayak-wp/advertise/">Advertise</a> 
 
    </li> 
 
    <li id="menu-item-288" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-288"><a title="Contact" href="http://localhost/eat-sleep-kayak-wp/contact/">Contact</a> 
 
    </li> 
 
    </ul> 
 
</div>

источник

2016-08-29 Elliott Davidson

работает для меня. , – pol

@pol это 'li' центрирование не' ul' @elliot, можете ли вы использовать CSS Flex? – akinjide

@AkinjideBankole Не знаю, что я знаю. –

Похоже, вы используете Bootstrap, чтобы построить его; по умолчанию CSS bootstrap устанавливает навигационную панель в float, тогда свойство inline-block не имеет никакого эффекта для достижения центра.

Это CSS по умолчанию:

.navbar-nav { 
    float: left; 
    margin: 0px; 
}

Вы можете добавить в свой реальный код этого:

div#footer-nav ul#menu-footer { 
    display: inline-block; 
    float:none; 
}

BootplyDemo

источник

2016-08-29 18:59:43 DaniP

Спасибо, не могу поверить, что это просто простой поплавок, вызывающий эту проблему. Еще раз спасибо! –

Я использую CSS Flex. Вы можете проверить codepen link.

#footer-nav.collapse.navbar-collapse { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
    justify-content: center; // This centers the ul 
    font-size: 16px; 
    color: #383434; 
    margin-top: 30px; 
    margin-bottom: 30px; 
} 

div#footer-nav > ul#menu-footer { 
    display: inline-block; 
} 

ul#menu-footer li { 
    padding: 0px 15px 0px 15px; 
}

источник

2016-08-29 19:04:27 akinjide

Как горизонтально центрировать выравнивание ul в div

ответ

Смежные вопросы