導航欄上的中心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

回答

相關問題