Question

我正在尝试将navbar分成12列，以便每个li分别占用一个部分。我想在我的起始栏中有一张图片。这就是我到目前为止所做的：

html, body {
  height: 100%; /*Fixes the height to 100% of the viewport*/
}
body {
  padding-top: 65px; /*50px for the height of the navbar + 37px for the offset*/
}

.navbar-inverse {
  background-color: #06658D;
  border: 0;
}

.navbar-inverse .navbar-nav > li > a {
  color: #FFF;
  width: 100px;
  line-height: 25px;
}

.navbar-inverse .navbar-nav > li > img {
  max-height: 25px;
  vertical-align: middle;
}

<!DOCTYPE html>
<html>
<head>
    <title>Dashboard</title>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/layout.css"/>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container row">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav ">
                    <li class="col-md-1"><img src="images/Home.png" alt="home"></li>
                    <li class="col-md-1"><a href="#">Column 2</a></li>
                    <li class="col-md-1"><a href="#">Column 3</a></li>
                    <li class="col-md-1"><a href="#">Column 4</a></li>
                    <li class="col-md-1"><a href="#">Column 5</a></li>
                    <li class="col-md-1"><a href="#">Column 6</a></li>

                    <li class="col-md-1"><a href="#">Column 7</a></li>
                    <li class="col-md-1"><a href="#">Column 8</a></li>
                    <li class="col-md-1"><a href="#">Column 9</a></li>
                    <li class="col-md-1"><a href="#">Column 10</a></li>
                    <li class="col-md-1"><a href="#">Column 11</a></li>
                    <li class="col-md-1"><a href="#">Column 12</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container body-content row">
        @RenderBody()  
    </div>
    @RenderSection("Scripts", required: false)
</body>
</html>

然而，这两者结合起来：

你可以看到我有两个问题。首先，图像的对齐是完全错误的，因为我希望它在水平和垂直方向都是中心。其次我的navbar没有被分成12个相等的元素，因为它们没有使用navbar的全宽。

Answer 1

尝试使用display table属性。我不认为你会得到相同的大小，但你会得到一个结果。

ul {
   display: table;
   width: 100%;
}
ul li {
   display: table-cell;
   text-align: center;
}

同样拆分带有居中图像的导航栏

1 个答案: