html - 三个 div，水平对齐

Question

我已经尝试纠正这个问题太久了，但一无所获。

我正在尝试使用 text-align: justify 在它们的父 div 中水平对齐三个内联 block div，但没有成功。我过去做过类似的事情，并且我读过其他线程，表明我正在正确地处理它。

我正在尝试学习 codeIgniter 框架，但不确定这是否相关。

我也是第一次使用 Aptana。同样，不确定这是否有任何影响(看不到它会如何)。

也许解决方案就在我面前，但我们将不胜感激。谢谢。

HTML:

<div about="homeContent" class="pageContent">
    <h1>Home</h1>
    <div id="threeColumn" class="threeColumnDiv"> <!--Define id and class-->
        <div id="One" class="threeColumnElement">
        </div>
        <div id="Two" class="threeColumnElement">
        </div>
        <div id="Three" class="threeColumnElement">
        </div>
    </div>
</div>

CSS:

html, body{
    height: 100%;
}

html{   
}

body {
    margin: 0px;
}



#wrapper{
    width: 960px;
    margin: 0px auto;
    min-height: 100%;
}


/****HEADER*****/

#headerBanner{
    height: 100px;
    width: 960px;
    background-color: green;
}

#leftHeaderBanner{
}

#rightHeaderBanner{
}

/****Home****/



#threeColumn{
    text-align: justify;
}


#One{
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: blue;


}

#Two{
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: blue;
}

#Three{
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: blue;
}




/****FOOTER****/
/***STICKY FOOTER FROM http://www.cssstickyfooter.com/using-sticky-footer-code.html*/

#footerBanner{
    width: 960px;
    background-color: blue;
    margin: 0px auto;
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
}

#leftFooterBanner{
}

#rightFooterBanner{
}

Answer 1

在#threeColumn中使用text-align:center代替text-align: justify;

#threeColumn{
    text-align: center;
}

Working Fiddle