css - 居中或者在父母的底部

Question

我想最终得到类似的东西

“11 月 22 日”元素应在父 div 的底部对齐并在中心对齐。剩下的日期（21、20、19、18）应该紧随其后。（中心垂直线仅用于说明目的）。

这在css中可能吗？

编辑：这是我到目前为止所得到的：

<div class="container">
    <div id="motd">
        <ul>
            <li class="selected">22 November</li>
            <li>21</li>
            <li>20</li>
        </ul>
    </div>
</div>

和 CSS

 .container
    {
        width: 960px;
        margin: 0 auto;
        overflow: hidden;
    }        

    #motd
    {
        width: 700px;
        height: 300px;     
        background-color: #efefef;       
        position: relative;
    }

    ul
    {
        position: absolute;
        left: 0;
        bottom: 0;          
    }

    li
    {
        float: left;
        list-style: none;
        padding: 7px 10px 7px 10px;
        background-color: #cacaca; 
        color: #ffffff;
    }

    li.selected
    {
        background-color: #393939;   
    }

Answer 1

为孩子使用相对位置并为孩子设置样式

postion:relative;
margin-right:auto;
margin-left:auto;

第二个选项是给它一个确定的宽度并减去父 div

父 div - 子，然后 css 子位置绝对和左侧：差除以二（基本上你想要每边的像素数量均匀

Answer 2

你不应该设置一个left位置。仅将元素绝对定位到底部（就像您所做的那样），然后通过将左右边距设置为auto.

ul {
    position: absolute;
    bottom: 0;
    width: 90%;
    margin: 0 auto;
}

您还可以将列表的宽度设置为 100% 并将 childli在列表中居中。