Center a ul innerhalb eines div (innerhalb einer div), die selbst auf der Seite zentriert ist

Ich versuche, meine CSS-Menü zu zentrieren, aber ich habe Probleme, im Grunde möchte ich es in der Mitte meines sein content div. Derzeit wird es von links angezeigt. Weiß jemand, was ich hinzufügen müsste, um zu erreichen, was ich will? Unten ist mein Code.Center a ul innerhalb eines div (innerhalb einer div), die selbst auf der Seite zentriert ist

Meine index.html

<head> 

<meta content="en-ie" http-equiv="Content-Language" /> 

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 

<title>Title</title> 

<link href="style.css" rel="stylesheet" type="text/css" /> 

</head> 

<body> 

<div id="contain"> 

    <div id="header"> 

     <p><img alt="" height="67" src="header.png" width="431" /><br /> 
     </p> 
    </div> 

<div id="tabs"> 
    <ul> 
     <li><a href="http://www.free-css.com/"><span>Item 1</span></a></li> 
     <li><a href="http://www.free-css.com/"><span>Item 2</span></a></li> 
     <li><a href="http://www.free-css.com/"><span>Item 3</span></a></li> 
    </ul> 
</div> 

<div id="content"> 


</div> 

<div id="footer" style="width: 93px; height: 12px"> 

</div> 

</body> 

</html>

Mein style.css

body{ 
background-color: #292929; 

} 
    p{ 
color: white; 
font-family:"Times New Roman", Times, serif; 
font-size: 14px; 
    } 

    h2{ 
color: white; 
font-family:"Times New Roman", Times, serif; 
font-size: 18px; 
    } 

    a:link { 
    COLOR: #00CCFF; 
    } 
    a:visited { 
    COLOR: #00CCFF; 
    } 
    a:hover { 
    COLOR: #00CCFF; 
    } 
    a:active { 
    COLOR: #00CCFF; 
    } 

    /* DIV's */ 

    #contain { 
background-color:#444343; 
width: 700px; 
margin-left: auto ; 
margin-right: auto ; 
opacity: .5; 
    } 
    #header { 
width: 700px; 
margin-left: auto ; 
margin-right: auto ; 
    } 

    #content { 
float: left; 
width: 700px; 
margin-left: auto ; 
margin-right: auto ; 

    } 

    #footer { 
color: white; 
font-size:10px; 
width: 11px; 
margin-left: auto ; 
margin-right: auto ; 

} 

    #tabs { 
float:left; 
width:100%; 
font-size:93%; 
border-bottom:1px solid #292929; 
line-height:normal; 
} 

    #tabs ul { 
margin:0; 
padding:10px 10px 0 50px; 
list-style:none; 
text-align: center; 
} 

    #tabs li { 
display:inline; 
margin:0; 
padding:0; 
} 

    #tabs a { 
float:left; 
background:url("tableft.gif") no-repeat left top; 
margin:0; 
padding:0 0 0 4px; 
text-decoration:none; 
} 

    #tabs a span { 
float:left; 
display:block; 
background:url("tabright.gif") no-repeat right top; 
padding:5px 15px 4px 6px; 
color:#FFF; 
} 

    /* Commented Backslash Hack hides rule from IE5-Mac \*/ 
    #tabs a span {float:none;} 

    /* End IE5-Mac hack */ 
    #tabs a:hover span { 
color:#FFF; 
} 

    #tabs a:hover { 
background-position:0% -42px; 
} 

    #tabs a:hover span { 
background-position:100% -42px; 
}

Quelle

2010-12-29 Skizit

können Sie eine feste Breite für die eingestellte #tabs ul (zB width:200px;) und dann ändern Sie die margin:0;-margin:0 auto; für #tabs ul

Quelle

2010-12-29 21:55:09 Sotiris

Wenn ich es richtig verstanden habe, müssen Sie den Block von unbekannter Breite horizontal zentrieren. Ich sehe zwei Ansätze:

einfach: Sie werden alle die Phantasie Markup Ihrer Tabs weglassen und nur Inline-Links in der Inline-LIs bewahren und display: block; auf Ihre #tabs ul Regel hinzuzufügen. Kein Floating, keine Blöcke im Menü, nur einfacher Inline-Text. Das wird funktionieren, wird aber nicht viel "stille" sein. pastebin.me/58fe73dd82496444fd7e129fc5830b4b
Complex ein: fügen Sie zusätzliche Wrap-around Ihre ul, so dass Sie #tabs #tabs-in ul li …


    #tabs { 
    float:left; 
    width:100%; 
    position: relative; 
    } 

    #tabs-in { 
    position: relative; 
    float: left; 
    left: 50%; 
    } 
    #tabs ul { 
    margin:0; 
    padding:0; 
    list-style:none; 
    text-align: center; 
    display: block; 
    overflow: hidden; 
    float: left; 
    position: relative; 
    left: -50%; 
    } 
    #tabs li { 
    display:block; 
    float: left; 
    margin:0; 
    padding:0; 
    }

http://pastebin.me/23c1b8a60657962f1d8c8baef2700473 Diese alten „es halb Eltern bewegen Breite rechts und dann bewegen die Hälfte seiner eigenen Breite übrig "Trick funktioniert ganz gut. Aber viel Glück, es weiter zu gestalten und es browserübergreifend kompatibel zu halten:]

Quelle

2010-12-29 23:05:51 myf

Center a ul innerhalb eines div (innerhalb einer div), die selbst auf der Seite zentriert ist

Antwort

Verwandte Themen