CSS - problem med att centrera text.

Trädvy Permalänk
Medlem
Registrerad
Nov 2011

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!

Trädvy Permalänk
Medlem
Registrerad
Okt 2013

Tror jag hittat en lösning
lägg till detta i CSS

#cssmenu ul { margin-left: auto; margin-right: auto; width: 60% !important; }

Sedan om du vill ha med fler flikar öka bara presenten på width

btw snygg meny

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Feb 2009

http://jsfiddle.net/3se192nb/1/

Är det något sådant du efterfrågar?

Trädvy Permalänk
Medlem
Registrerad
Sep 2007

Om du inte sätter en fast bredd på din navigation så går det inte att göra med floats..

Däremot är det superenkelt med inline-blocks! http://liveweave.com/89lK7I

Kom-pa-TI-bilitet