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

Maybe you could try something like this using 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);
});​

Answer 2

如果您不介意一些标记更改：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;
}