[英]How to horizontally centre align a ul within a div
我不确定为什么这个文本对齐中心没有生效。 我已经查找了其他教程,我正在将textalign: center
应用于div,然后display: inline
到ul。
这是我在检查元素时从浏览器获取的HTML代码的副本,因为我实际构建了一个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>
好像你正在使用Bootstrap来构建它; bootstrap的默认CSS是将导航栏设置为float
,然后inline-block
属性完全没有效果来实现中心。
这是默认的CSS:
.navbar-nav {
float: left;
margin: 0px;
}
您可以添加到您的实际代码:
div#footer-nav ul#menu-footer {
display: inline-block;
float:none;
}
我正在使用CSS Flex。 您可以签出codepen链接。
#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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.