div内で水平に配置する適切な方法は何ですか？

私はHTML/CSSには比較的新しいので、他の間違いを修正してみてください。私のHTMLとCSSは次のとおりです。http://jsfiddle.net/luxurymode/PrjJ3/3/div内で水平に配置する適切な方法は何ですか？

私がしたいことは、その "navbar"内でULを水平に中央に置くことです。正しい方法は何ですか？

EDIT：間違ってフィドルを投稿しました。それは正しいです...

出典

2012-02-27 LuxuryMode

効果を達成する方法はたくさんあります。「正しい」と「正しい」とはどういう意味ですか？ –

あなたのli要素を同じ行にするより良い方法は、display：inline、float：leftを削除し、display：blockをリンクから削除することです。 – abresas

ありがとう@abresas！ – LuxuryMode

適切な方法が

#topbar ul { 
    width: /* exact width of the ul */; 
    margin: 0 auto; 
}

DEMO

あるもう一つの方法は、100％のX-ブラウザ

#topbar { 
    text-align: center; 
} 

#topbar ul { 
    display: inline-block;  
}

しかしinline-blockではありません証明。

DEMO

出典

2012-02-27 21:18:50 paislee

幅が動的である場合はどうなりますか？私はこのような幅やメニューでハードコーディングできない多くの場合を知っています。 –

ありがとう！そして、どのように垂直に？マージン0のオートを追加すると、垂直のセンタリングが消えてしまったようです。 http://jsfiddle.net/luxurymode/PrjJ3/9/ – LuxuryMode

両方の方法を提供するための親指paislee。 –

簡単な方法は、リストに幅を与え、0 autoにマージンを設定することです：あなたは常にあなたのULの価値を知っている場合は

#topbar ul { 
    list-style-type: none; 
    margin:0 auto; 
    width:300px 
}

出典

2012-02-27 21:21:24 j08691

最初のカップルの答えの例を使用してください。幅が何であるかわからない場合は、わずかに異なる方法を使用する必要があります。 liのfloat:left;をdisplay:inline;に変更し、ulにtext-align:center;を追加してください。

出典

2012-02-27 21:28:05

まず：インラインブロック、使用したブラウザの互換性（IE & FF）用：

display:-moz-inline-stack; 
display:inline-block; 
zoom:1; 
*display:inline;

だから、#nav李で、フロートを削除：左とそれを作る：

#nav li { 
    display:-moz-inline-stack; 
    display:inline-block; 
    zoom:1; 
    *display:inline; 
    border-right: 1px solid #fff; 
    box-shadow: 1px 0 0 rgba(255, 255,255, 0.1); 
}

次にあなたを中心にするには

#nav { 
    padding: .5em; 
    height: 55px; 
    width: 650px; 
    background-color: #325A8C; 
    text-align: center; 

}

出典

2012-02-27 21:39:12

div内で水平に配置する適切な方法は何ですか？

答えて

関連する問題