css - 将 或 置于父级 底部的中心

Question

我想以类似于 this 的方式结束

“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

为 child 使用相对位置并为 child 设置样式

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

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

parent div - child 然后 css child position absolute and left: difference divided by 2(基本上你想要每边的像素数量相同