将文本定位在底部并同时居中

Question

我正在尝试将导航元素放在彩色框中。此框中的文本应位于此框的底部和中心。

HTML

<div class="sixteen columns">
  <section id="mainNav">
    <ul>
      <li id="nav2" class="navitem"><a href="#">ux / ui</a></li>
    </ul>
  </section>
</div><!--end sixteen columns-->

CSS：

    /*navigation styles*/
 .sixteen.columns #mainNav {
    width: 100%;
    margin-top: 50px;
}
#mainNav .navitem {
    width: 40%;
    display: block;
    float: left;
    position: relative;
    pointer: cursor;
}
#mainNav ul li a {
    font-family: print_clearlyregular, "Arial", serif;
    font-size: 2em;
    color: rgb(255, 255, 255);
    text-decoration: none;
    position: absolute;
    bottom: 15px;
    left: 0;
}
#mainNav #nav2 {
    background: rgb(3, 106, 113);
    opacity:0.8;
    filter:alpha(opacity=80);
    /* For IE8 and earlier */
    margin-right: 4px;
    height: 150px;
    text-align:center;
}

一旦我绝对定位“ul li a”，text-align：center就不起作用了。我该怎么解决这个问题？

你也可以在jsfiddle中看到这个位：

jsFiddle

Answer 1

将width:100%;添加到

#mainNav ul li a {}

小提琴：http://jsfiddle.net/sablefoste/bcM2x/

Answer 2

请勿为left指定right（或ul li a）的任何值。

Answer 3

我想添加一个不依赖浮动或绝对定位的替代解决方案，这可能会变得非常混乱。

使用display: table，display: table-cell和vertical-align: bottom，您可以获得上述结果。当周围的其他物品可能发生变化时，这也可以很好地扩展。

Here is a working jsFiddle demo

---

CSS更改

我移除了所有浮动和位置样式，将display: table添加到ul，将display: table-cell和vertical-align: bottom添加到li，添加{ {1}} display: inline-block以及a以保留填充您创建的绝对定位。我修改了选择器并添加了一些其他可以使用的小东西或根据自己的喜好进行调整。

margin-bottom: 15px