CSS - problem med att centrera text.
Tjenare! Jag har ett litet problem när jag försöker att få texten att bli "centrerad" i navigations menyn. Jag har testat att justera på lite olika sätt men får det inte att fungera. Min fråga är därför om någon här skulle kunna vara snäll nog att "hjälpa" mig med att få texten centrerad. Jag försökte göra en så kallad "wrapper" och justerade bredden till 80% men det innebär ju givetvis per automatik att bakgrunden justeras också. Jag vill ju bara ha texten centrerad.
Här är koden
@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
body {
margin: 0;
padding: 0;
}
#headmenu
{
padding: 0;
margin: 0;
border: 0;
width: auto;
height: 35px;
background: #333333;
border-bottom: 1px solid #424040;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
}
#cssmenu {
padding: 0;
margin: 0;
border: 0;
padding: auto 0;
width: auto;
}
#cssmenu ul,
#cssmenu li {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
}
#cssmenu ul li {
float: left;
min-height: 1px;
vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: 0;
left: 190px;
width: 190px;
}
#cssmenu ul li:hover > ul {
visibility: visible;
}
#cssmenu ul ul {
bottom: 0;
left: 0;
}
#cssmenu ul ul {
margin-top: 0;
}
#cssmenu ul ul li {
font-weight: normal;
}
#cssmenu a {
display: block;
line-height: 1em;
text-decoration: none;
}
/* Custom CSS Styles */
#cssmenu {
background: #333333;
border-bottom: 4px solid #ff761b;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
}
#cssmenu > ul {
*display: inline-block;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu ul {
text-transform: uppercase;
}
#cssmenu ul ul {
border-top: 4px solid #ff761b;
text-transform: none;
min-width: 190px;
}
#cssmenu ul ul a {
background: #ff761b;
color: #ffffff;
border: 1px solid #e75c00;
border-top: 0 none;
line-height: 150%;
padding: 16px 20px;
font-size: 12px;
}
#cssmenu ul ul ul {
border-top: 0 none;
}
#cssmenu ul ul li {
position: relative;
}
#cssmenu ul ul li:first-child > a {
border-top: 1px solid #e75c00;
}
#cssmenu ul ul li:hover > a {
background: #ff954e;
color: #ffffff;
}
#cssmenu ul ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-moz-box-shadow: 0 1px 0 #ff761b;
-webkit-box-shadow: 0 1px 0 #ff761b;
box-shadow: 0 1px 0 #ff761b;
}
#cssmenu ul ul li:last-child:hover > a {
-moz-border-radius: 0 0 0 3px;
-webkit-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#cssmenu ul ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#cssmenu ul li:hover > a,
#cssmenu ul li.active > a {
background: #ff761b;
color: #ffffff;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
margin-left: 5px;
}
#cssmenu ul li.last ul {
left: auto;
right: 0;
}
#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%;
}
#cssmenu a {
background: #333333;
color: #CBCBCB;
padding: 0 20px;
}
#cssmenu > ul > li > a {
line-height: 48px;
font-size: 12px;
}
<div id="headmenu"></div>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>testing</span></a></li>
<li><a href='#'><span>testing</span></a></li>
<li class='has-sub'><a href='#'><span>testing</span></a>
<ul>
<li class='has-sub'><a href='#'><span>testing</span></a>
<ul>
<li><a href='#'><span>testing</span></a></li>
<li class='last'><a href='#'><span>testing</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>testing</span></a>
<ul>
<li class='last'><a href='#'><span>testing</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>testing</span></a>
<ul>
<li class='last'><a href='#'><span>testing</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>testing</span></a></li>
<li class='has-sub'><a href='#'><span>testing</span></a>
<ul>
<li><a href='#'><span>testing</span></a></li>
<li class='last'><a href='#'><span>testing</span></a></li>
</ul>
</li>
<li><a href='#'><span>example</span></a></li>
<li><a href='#'><span>example</span></a></li>
<li class='last'><a href='#'><span>example</span></a></li>
</ul>
</div>
Jag vill med andra ord veta hur jag ska bära mig åt för att få texten centrerad och i samma stund följa en så kallad "wrapper" d.v.s. så att texten inte går utanför width: 80%; och margin-left: auto; margin-right: auto; etc.. Någon som vet hur jag gör detta?
Är det någon som vet hur jag får det att centreras? Är tacksam för svar och tips!
