Question

我正试图画一个盒子。在这个框中，我想在左上角和右上角放置一些元素，然后在下面绘制其他元素，拥抱盒子的底部，但不再在角落里。

在左下角元素的情况下，我希望它在框的左列/半边中居中，而我希望右下角元素在其右列/半框中右对齐。

我在http://jsfiddle.net/7GeAM/2/创建了一个jsfiddle来说明我的目标。我已使用position:absolute;bottom:0将底部文本对齐到框的底部，但文本对齐属性似乎不再执行任何操作。

我可以做些什么来再次实现这些对齐？谢谢！

编辑：我更新了jsfiddle以使用样式表。目标是在每个列的底部保留文本的位置。在左下角，我希望将文本置于其列中。在右下角，我希望右对齐文本，也在其列中。

Answer 1

您需要为div设置一个宽度，以便文本对齐起作用。例如，你可以让它们各自占据盒子宽度的一半：

.bottom-left {
    left: 0;
    right: 50%;
}

.bottom-right {
    left: 50%;
    right: 0;
}

http://jsfiddle.net/N6v6W/

Answer 2

<强> jsBin demo

<div class="container">
    <div class="float-left-50">
        <div class="cell">
             <p class="text-left">Top Left</p>
        </div>
        <div class="cell">
             <p class="abs-bottom text-center">Bottom center</p>            
        </div>
    </div>
    <div class="float-left-50">
        <div class="cell">
            <p class="text-right">Top Right</p>
        </div>
        <div class="cell">
            <p class="abs-bottom text-center">Bottom Center</p>    
        </div>
    </div>
</div>

CSS：

*{margin:0; padding:0;}

.container {
    position:relative;  
    border: 1px solid #000;
    height:200px;
    display:inline-block;
    width:400px;
}
.text-left { text-align:left; }
.text-right{ text-align:right; }
.text-center{ text-align:center; }
.float-left-50{
    width:50%;
    float:left;
}
.cell{
    position:relative;
    width:198px;
    height:98px;
    border:1px dashed #aaa;
    background:#eee;
}
.abs-bottom{
    position:absolute;
    bottom:0px;
    width:100%;
    text-align:center;
}

在绝对位置内水平对齐文本

2 个答案: