0

我目前正在为我的网页制作标题，问题是我似乎无法让我的（标题图像）居中下图显示我的问题，其中文本：“Inlustra”是写的，我想在Header的中心。

您认为仅使用 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 回答