html - Divを中央に揃える方法と、それを親Divに関連付ける方法は？

Question

html：

<div class="parent">
<div>
         <a href="">First Page</a><a href="">Second Page</a><a href="">Third Page</a>
</div>
</div>

css：

div.parent > div > a {
margin-right: 2em;              
}
div.parent {
border: 1px solid red;
height: 100px;
background-color: #bbb;
}
div.parent > div {
border: 1px solid lightblue;
background-color: #fff;

height: 40px;
width: 900px;

display: block;
float: default;
margin: 0 auto 0;
}

---

例：

スタイルシートの結果はJSFiddleで見ることができます：http：//jsfiddle.net/BMEXR/2/

注意：色と間隔は、区別しやすいように設定されています。

どのようdivにaligned、middleそしてそれrelativeをその中に入れることができparentますか？のdivに移動relativeするようheight settingにparent div？

Answer 1

マークアップの変更を気にしない場合：http： //jsfiddle.net/BMEXR/30/

HTML：

<div class="parent">
    <div class="childContainer">
        <div class="childContents">
             <a href="">First Page</a><a href="">Second Page</a><a href="">Third Page</a>
        </div>
    </div>
</div>

CSS：

div.childContents a {
   margin-right: 2em;              
}
div.childContents{
   background-color:white;
   height: 25px;
   width: 900px;    
}
div.parent {
   border: 1px solid red;
   height: 100px;
   background-color: #bbb;
   display:table-row;
}
div.childContainer {
   border: 1px solid lightblue;
   background-color: transparent;
   vertical-align:middle;
   display: table-cell;
}

Answer 2

たぶん、jQueryを使用してこのようなことを試すことができます：http：//jsfiddle.net/BMEXR/32/

HTML：

<div class="parent">
    <div class="container">
        <ul>
            <a href="">First Page</a> | <a href="">Second Page</a> | <a href="">Third Page</a>
        </ul>
    </div>
</div>

</ p>

CSS：

div.parent {
    border: 1px solid red;
    height: auto;
    background-color: #bbb;
    text-align: center;
    padding: 5px;
}

div.container {
    margin: 0 auto;
    border: 1px solid lightblue;
}

</ p>

JS：

$(function() {
    var aSize = $('a').size();
    var aTotalSize = 0;

    for(var i = 0; i < aSize; i++) {
        aTotalSize += $('a').eq(i).width()+10;
    }
    $('.container').width(aTotalSize);
});​