0

私は現在、自分の Web ページのヘッダーを作成していますが、問題は、(タイトル画像となるもの) を下の画像の中央に配置できないことです。テキスト: "Inlustra"と書いてありますが、ヘッダーの中央にお願いします。

divだけを使用したほうがよいと思いますか? もしそうなら、これはどのように行われますか？以前は左右の div をフローティングすることさえできず、順序なしリストに切り替えました。

これが私のcssです：

    #header {
    position:relative;
    -webkit-box-shadow: 0px 7px 30px rgba(50, 50, 50, 1);
    -moz-box-shadow:    0px 7px 30px rgba(50, 50, 50, 1);
    box-shadow:         0px 7px 30px rgba(50, 50, 50, 1);
    z-index:10;
    width:100%;
    height:40px;
    background-color: #FFFFFF;
    border-bottom:3px solid #1C6FFF;
}

.nav li {
    margin-left:-10px;
    display: inline-block;
    list-style: none;
    text-align: center;
    min-width:100px; width: auto !important; width: 100px;
}

.centerchild {
    width:150px;
    margin-left: auto;
    margin-right: auto;
    clear:both;
}

.firstchild {
    width:50px;
    float:left;
    text-align:left;
    margin-right:1.3em;
}

.lastchild {
    width:50px;
    float:right;
    margin-left:1.3em;
    text-align: right;
}

ここに私のHTMLがあります:

 <div id="header"> 
                <ul class="nav">
                    <li class="firstchild"> <i class="icon-home icon-2x"> </i> </li>
                    <li class="firstchild"> <i class="icon-inbox icon-2x"> </i> </li>
                    <li class="lastchild"> <i class="icon-twitter icon-2x"> </i> </li>
                    <li class="lastchild"> <i class="icon-facebook icon-2x"> </i> </li>
                    <li class="centerchild"> TITLE OF PAGE </li>
                </ul>
            </div>

そして、これが結果です http://imgur.com/IarX4bX

4

1 に答える 1

0

私自身はこの答えが好きではありませんが、1995 年すべてに行ってテーブルを使用すれば、少なくとも仕事は完了します。あなたの例では、左右に浮かぶ要素の幅は変わらないので、次のようなことができます：

(簡潔にするためにインライン スタイルを使用しています)

<table style="width: 100%">
  <tr>
    <td style="width: 80px">Left</td>
    <td style="text-align: center">Center</td>
    <td style="width: 80px">Right</td>
  </tr>
</table>

これを行うためのよりエレガントな方法があると本当に信じたいのですが、テーブルを使用して他の誰かに投稿するように仕向けています:-)

于 2013-07-25T18:34:05.327 に答える