html - navでul（垂直および水平）を絶対的に中央に配置しようとしています

Question

... > coding.smashingmagazine.com/..にあるこのチュートリアルの助けを借りて

nav {
    color: #fff;
    background-color: #333;
    position: relative;
    height: 200px;
}

nav ul {
    list-style: none;
    overflow: auto;
    width: 50%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

nav li {
    display: inline-block;
    margin: 0 10px;
    font-size: 25px;
    line-height: 100%;
}

私はそれを正しく理解できません。私のjsfiddleを見てください。

助けてくれてありがとう。

画像... chrome/ macos x 10.8.x > ul v/h は中央揃えですか?

Answer 1

絶対配置を取り除きます。nav コンテナーの高さを固定したい場合は、次のように行の高さを使用できます。

nav {
    color: #fff;
    background-color: #333;
    height: 200px; /* This must be defined and match the line-height below */
    text-align: center;
}

nav ul {
    white-space:nowrap;
    padding: 0;
}

nav li {
    display: inline;
    font-size: 25px;
    line-height: 200px; /* This must match the nav height defined above */
}

Answer 2

これは、次の CSS を使用すると、はるかに簡単に実現できます。ULの絶対は必要ありません。http://jsfiddle.net/9N2hW/2/を参照

nav {
    color: #fff;
    background-color: #333;
    position: relative;
    height: 200px;
}

nav ul {
    list-style: none;
    overflow: auto;
    width: 50%;
    margin: auto;
}

nav li {
    display: inline-block;
    margin: 0 10px;
    font-size: 25px;
    line-height: 200px;
}