均等にsplitted navbar with centered image

私はnavbarを12列に等分して、それぞれliが1つのセクションになるようにしています。私は最初の欄にイメージを持っています。これは私がこれまで持っているものである： -均等にsplitted navbar with centered image

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>

これら2しかし、このにつながる組み合わせ：

あなたが見ることができるように私は2つの問題を抱えています。まず、イメージのアライメントはすべて間違っていますので、水平と垂直の両方に集中してください。第二に私のnavbarは、navbarの全幅を利用していないので、12の等しい要素に分割されていません。

出典

2017-11-03 CBreeze

ディスプレイテーブルのプロパティを使用してみてください。私はあなたが平等なサイズを得るつもりはないと思っていますが、あなたはそれほど結果を得ることはありません。

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

出典

2017-11-03 11:44:54

均等にsplitted navbar with centered image

答えて

関連する問題