问题描述:

I can't figure out how to center our IMG on our nav bar. Apologies this is such a basic question.

Text align doesn't work and the following doesn't work bc it makes the img go above the nav bar list. Anyone have any ideas on the simplest fix? Many Thanks!

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>

网友答案:

There's a very simple trick you can use.

Make your image become a child of a navbar then set position:relative; to the navbar.

Now in your image insert this code.

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

The image will go to the very center of your navbar both vertical and horizontal.

But if you only want to center it horizontally, remove the top: 50%; and change the transform: translate(-50%, -50%); to transform: translateX(-50%);

Like this:

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

And for vertical, remove the left: 50%; and change the transform: translate(-50%, -50%); to transform: translateY(-50%);

Like this:

img{
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
    }
网友答案:

Just add div with class row text-center above image link as below:

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

If you don't want to hard code in padding and margin to center an element, using auto margin is the common solution.

Typically issues with elements not showing up where they should comes from using the float attribute. Using float takes the element out of the normal flow of the DOM. You need to clear the float for elements to take their normal positions after a floated element.

Here's an article that helps explain more about floats:

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

Again, this is all assuming your issue comes from floats.

相关阅读:
Top