For some strange reason, my text-align: center;
isn't working. It's weird 'cause it's the most basic stuff to do for both HTML and developer, so I'm kind of embarrassed... I must doing something terrible wrong and don't see my mistake. The text-align
option isn't even showing in Firebug.
Could anyone help me out here?
HTML:
<div id="main-menu">
<ul id="main-menu-links" class="links clearfix">
<li class="menu-286 first active">
<a class="active" title="" href="/dashboard">Dashboard</a>
</li>
<li class="menu-194">
<a href="Organisation">Organisation</a>
</li>
</ul>
</div>
CSS: (I have tried to place text-align: center
in each selector, but with no result...)
div#main-menu {
background-color: #c4d82d;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
div#main-menu ul {
padding: 0px;
}
div#main-menu li{
border-right: 1px solid #86a43f;
width: 186px;
}
div#main-menu li.last{
border: none;
}
div#main-menu a, div#main-menu a.active {
background: none;
text-shadow: none;
}
div#main-menu a:hover {
background: none;
font-style: italic;
}
It's working as intended, when I wrap the <ul>...</ul>
elements in a <div id="main-menu">
: http://jsfiddle.net/6bBK5/
Make sure that you use the correct selectors. IDs are case-sensitive, spaces in the selector are significant.
<div>
<span>
<ul>
<li>Here is the centered Title!</li>
</ul>
</span>
</div>
CSS
ul {text-align: center;}
li {display:inline; padding:0 10px 0 0}
So, is working:
div#main-menu li{
border-right: 1px solid #86a43f;
width: 186px;
text-align:center;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.