Question

我有以下代码，我尝试做的是让导航徽标在任一侧以相同的像素为中心，因此左右链接的距离相同。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <a class="navbar-brand" href='@Url.Action("Index", "Home")'></a>
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav navbar-left">
                <li>@Html.ActionLink("PRODUCTS", "Products", "Products")</li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" style=" font-family: Foco-Regular">VISIT US: <b>f</b></a></li>
            </ul>
        </div>
    </div>
</nav>

这是我的CSS

.navbar-brand {
background-image: url("/Content/Images/Brand-Background-New5.png");
background-repeat: no-repeat;
display: block;
height: 94px;
left: 42%;
margin: auto;
position: absolute;
text-align: center;
top: 16%;
width: 301px;
z-index: 9999;

}

现在在大屏幕上，即dessktops以上工作正常，但是当我最小化浏览器，或者有人打开网站说15英寸笔记本电脑时，导航栏品牌不再居中，它看起来更右边？如何锁定它，使其无论屏幕尺寸如何都保持居中

Answer 1

您可以使用CSS calc（）函数：css calc tutorial

正在发生的事情是，在小屏幕上，42％是导航左侧的空间，导航本身占据了屏幕的50％（因为它太小了）而你只剩下2％在右边。

导航的宽度是多少？宽度：301px;
电脑屏幕的总宽度是多少？ 100％
因此，完美居中导航左侧的空间应为：（100％-301px）/ 2
求解方程得出：50％-150px

只需修复CSS代码中的一行即可：

left: calc(50% - 150px);

- （减号）标志周围的空间是重要的

生成的CSS应为：

.navbar-brand {
    background-image: url("/Content/Images/Brand-Background-New5.png");
    background-repeat: no-repeat;
    display: block;
    height: 94px;
    left: calc(50% - 150px);
    margin: auto;
    position: absolute;
    text-align: center;
    top: 16%;
    width: 301px;
    z-index: 9999;  }

如何使导航品牌集中整合

1 个答案: