Question

我正在为我的网页制作一个标题，好吧，问题是我似乎无法将我的（标题图像是什么）放在下面的图像中心显示我的问题，文字在哪里：写了“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>

这是结果

Answer 1

我自己并不喜欢这个答案，但是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>

我真的很想相信有更优雅的方式来做这件事，而我正在使用桌子来诱骗其他人发布它： - ）

将<li>元素沿着左侧浮动中心居中并浮动右侧元素</li>

1 个答案: