中心标志在ul?

时间:2013-11-04 23:52:43

标签: html css css3 navigation

我知道很多人都试图这样做,并制定了一些恰好可以解决的系统,或者只是为了“顺便”,但是最好的方法是什么?我有几乎完整的东西,但由于某种原因,徽标不是居中,而是整个ul。这就是我得到的。

enter image description here

但是,这是我在文本长度相同时得到的结果:

enter image description here

这是我的HTML:

<div class="navbar">

    <ul>

        <li>
            <a class="navbarLinks" href="#">Big Text Here</a>
        </li>

        <li>
            <a class="navbarLogo" href="/"><img src="images/logo.png" width="100"></a>
        </li>

        <li>
            <a class="navbarLinks" href="#">Small Text</a>
        </li>

    </ul>

    <div class="divider"></div>

</div>

我的css:

.navbar
{
    margin:0 auto;
    text-align: center;
    z-index: 9999;
    margin-top: 10px;
}

.navbar ul
{
    display: inline-block;
    list-style-type: none;
    margin:0 auto;
    padding: 0px;
}

.navbar li
{
    display: inline-block;
    list-style-type: none;
    vertical-align: middle;
}

.navbarLinks
{
    color:#ccc;
    margin: 20px;
    text-align:center;
    display:block;  
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    text-decoration: none;  
    font-family: arial;
    font-size: 20pt;
    font-weight: bold;
}

.navbarLinks:hover
{
    color:#fff;
}

.navbarLogo
{
    padding-bottom: 0px;
    text-align: center;
}

如何修复我的代码?

1 个答案:

答案 0 :(得分:0)

最简单的方法,尽管是一个巨大的黑客,只是给左和右<li>一个百分比width,比方说,40%左右。然后它们会保持相同的尺寸,同时在中间留下一点间隙。

最好的方法是使用flexbox,它可以让你明确说出你想要的东西,即分割两个文本部分之间的任何额外空间:

.navbar ul {
    display: flex;
}
.navbar li.navbarLinks {
    flex: 1;
}

这只是说:ul应该是一个flexbox(意味着它的所有子节点应该排成一行并填充可用空间),并且任何额外的空间应该以1的比例给予链接: 1。

这是crappy fiddle

缺点是这只适用于pretty recent browsers,特别是IE10是第一个支持它的IE。 对语法进行了三次修改,所以你也需要支持这些修改,也许还需要这样的Sass flex mixin(即使你写的也是一个有用的参考资料)静态CSS)。

另一方面,您可以使用两种方法。不了解flexbox的浏览器会服从inline-block而只是看到稍微偏离中心的徽标。