导航栏上的中心IMG

我无法弄清楚如何将我们的IMG集中在导航栏上。道歉这是一个基本的问题。导航栏上的中心IMG

文本对齐不起作用，以下操作不起作用bc它使img走到导航栏列表的上方。任何人有最简单的修复任何想法？非常感谢！

display: block; 
margin-left: auto; 
margin-right: auto }

.logo img { 
 
    width: 34%; 
 
    max-width: 150px; 
 
    max-height: 150px; 
 
    height: 35%; 
 
} 
 
.nav-item--left { 
 
    float: left; 
 
    margin-right: 20px; 
 
    margin-top: 35px; 
 
} 
 
@media (min-width: 768px) { 
 
    .nav-item--left { 
 
    margin-right: 25px; 
 
    } 
 
} 
 
.nav-item--right:last-child { 
 
    margin-right: 0; 
 
} 
 
.nav-item--right { 
 
    display: block; 
 
} 
 
.nav-item--right { 
 
    float: right; 
 
    margin-right: 20px; 
 
    margin-top: 35px; 
 
} 
 
@media (min-width: 768px) { 
 
    .nav-item--right { 
 
    margin-right: 25px; 
 
    } 
 
} 
 
.nav-item--right:last-child { 
 
    margin-right: 0; 
 
} 
 
.nav-item--right { 
 
    display: block; 
 
}

<div id="narrow-display-test" style="display:none"></div> 
 

 
<header class="header container container--fluid container--darkBackground js-header"> 
 

 

 
    <div class="container"> 
 
    <a href="/" class="logo"> 
 
     <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]" alt="alt"> 
 
    </a> 
 

 

 

 

 
    <ul class="nav"> 
 

 

 

 
     <li class="nav-item"> 
 

 
     <a class="nav-itemText nav-itemText--link"> 
 
      <div class="header" ng-controller="LoginCtrl"> 
 
      <div class="clearfix"> 
 
       <div class="welcome pull-right" ng-show="userLoaded"> 
 
       <a class="nav-itemText nav-itemText--link" href=""> 
 
        <span ng-show="currentUser">Your Site</span> 
 
       </a> 
 

 
       </div> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     </li> 
 

 

 

 

 

 
     <li class="nav-item"> 
 
     <a class="nav-itemText nav-itemText--link"> 
 
      <div class="header" ng-controller="LoginCtrl"> 
 
      <div class="clearfix"> 
 
       <div class="welcome pull-right" ng-show="userLoaded"> 
 
       <a class="nav-itemText nav-itemText--link" href="/"> 
 
        <span ng-show="currentUser">Your Site2 </span> 
 
       </a> 
 

 
       </div> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     </li> 
 

 

 

 

 
     <li class="nav-item"> 
 
     <a class="nav-itemText nav-itemText--link"> 
 
      <div class="header" ng-controller="LoginCtrl"> 
 
      <div class="clearfix"> 
 
       <div class="welcome pull-right" ng-show="userLoaded"> 
 
       <a class="nav-itemText nav-itemText--link" href="/"> 
 
        <span ng-hide="currentUser"> 
 
    Your Site 3 
 
    </span> 
 
       </a> 
 

 
       </div> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     </li> 
 

 
     <li class="nav-item"> 
 
     <a class="nav-itemText nav-itemText--link"> 
 
      <div class="header" ng-controller="LoginCtrl"> 
 
      <div class="clearfix"> 
 
       <div class="welcome pull-right" ng-show="userLoaded"> 
 
       <a class="nav-itemText nav-itemText--link" href="/"> 
 
        <span ng-hide="currentUser"> 
 
    Your Site 4 
 
    </span> 
 
       </a> 
 

 
       </div> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     </li> 
 

 
     <li class="nav-item"> 
 
     <a class="nav-itemText nav-itemText--link"> 
 
      <div class="header" ng-controller="LoginCtrl"> 
 
      <div class="clearfix"> 
 
       <div class="welcome pull-right" ng-show="userLoaded"> 
 
       <a class="nav-itemText nav-itemText--link"> 
 

 
        <ng-include src="'/partials/login.html'"></ng-include> 
 
       </a> 
 

 
       </div> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     </li> 
 

 
    </ul> 
 
    </div>

来源

2016-06-01 H.I

请正确格式化代码，并添加到您的html也 – Pushpendra

哪里是你的HTML？ – hello

对不起，它已更新！ @hello –

如果你不想在填充和利润率硬编码到中心的元素，使用自动保证金是常见的解决方案。

通常与元素有关的问题未显示出来，他们应该来自使用float属性。使用float将元素从DOM的正常流中取出。您需要清除元素的浮动元素，以在浮动元素之后采用其正常位置。

这里有一篇文章，有助于解释更多的花车：

https://css-tricks.com/all-about-floats/

再次，这是所有假设你的问题来自于浮动。

来源

2016-06-01 03:36:50 jtmingus

使用评论来寻求更多信息或建议任何改进。 – Pushpendra

@Pushpendra我提交得太早了。我仍然在写我的答案。谢谢，不过 – jtmingus

有一个非常简单的技巧，你可以使用。

使您的图像成为导航栏的子项，然后将position:relative;设置为导航栏。

现在在您的图片中插入此代码。

img{ 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
}

图像将垂直和水平地放到导航栏的正中央。

但如果你只想水平居中，取出top: 50%;，改变transform: translate(-50%, -50%);到transform: translateX(-50%);

像这样：

img{ 
     position: absolute; 
     left: 50%; 
     transform: translateX(-50%); 
    }

而对于垂直，除去left: 50%;，改变transform: translate(-50%, -50%);到transform: translateY(-50%);

像这样：

img{ 
     position: absolute; 
     top: 50%; 
     transform: translateY(-50%); 
    }

来源

2016-06-01 04:53:35 Vashtamyty

只需添加div带班row text-center以上的图像，如下链接：

<div class="row text-center"> 
    <a href="/" class="logo"> 
     <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]" alt="alt"> 
    </a> 
    </div>

来源

2016-06-01 05:06:17 Amit

导航栏上的中心IMG

回答

相关问题