html - テキストの下部配置と中央揃えを同時に行う

Question

色付きのボックスに nav 要素を配置しようとしています。このボックスのテキストは、このボックスの下部中央に配置する必要があります。

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 でも確認できます。

jsフィドル

Answer 1

フロートや絶対配置に依存しない代替ソリューションを追加したいと思います。これはかなり面倒になる可能性があります。

display: table、display: table-cell、およびを使用vertical-align: bottomすると、上記の結果を得ることができます。これは、周囲の他のアイテムが変更される可能性がある場合にも適切にスケーリングされます。

これは動作中のjsFiddleデモです

---

CSS の変更

float と position のすべてのスタイルを削除し、 に追加display: tableし、ulに追加display: table-cellしvertical-align: bottom、liに追加display: inline-blockし、awithに追加して、margin-bottom: 15px作成した絶対位置のパディングを保持しました。セレクターを変更し、好みに合わせて使用​​または調整できる他のいくつかのマイナーなものを追加しました。

/*navigation styles*/
#mainNav 
{
    width: 100%;
    margin-top: 50px;
}
#mainNav > ul 
{
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
}
#mainNav > ul > li 
{   
    display: table-cell;
    height: 150px;
    text-align: center;
    vertical-align: bottom;
    pointer: cursor;
    background: rgb(3, 106, 113);
    opacity:0.8;
    filter:alpha(opacity=80);
    /* For IE8 and earlier */
    margin-right: 4px;
}

#mainNav > ul > li > a
{
    display: inline-block;
    margin-bottom: 15px;
    font-family: print_clearlyregular, "Arial", serif;
    font-size: 2em;
    color: rgb(255, 255, 255);
    text-decoration: none;
    background: blue; // added for demo to show width and margin
}

Answer 2

leftfor (またはrightそれについて) for に値を指定しないでくださいul li a。