CODEWITHSUNDEEP
htmlcss
Zeeshan Ahmed
Zeeshan Ahmed

Reputation: 47

Align image in center without getting space

enter image description hereI want to align the logo at the center in the navigation bar of the page.

This is my code:

<div class="nav">
    <ul>
        <li id="center">
           <a href="home.php"><img src="images/w_logo.gif"></a>
        </li>
    </ul>
</div>

I have found this solution online:

#center img{
    display: block;
    margin: auto;
}

But the problem is that by using display:block property I am getting space around the image which is increasing the height of my navigation bar and I am not being able to remove that space.

Help would be appreciated.

Upvotes: 0

Views: 1049

Answers (3)

user6864832
user6864832

Reputation: 

#center img{
display: block;
margin: auto;
}
ul{margin:0;}
li{padding:0;list-style:none;}
<div class="nav">
        <ul>
            <li id="center"><a href="home.php"><img src="https://dummyimage.com/50x50/000/fff"></a></li>
        </ul>
    </div>

Demo

Upvotes: 0

Rehan
Rehan

Reputation: 4013

Check this fiddle. https://jsfiddle.net/5huhpxuk/

#center img {
  display: block;
  margin: auto;
}

.nav {
  background-color: black;
  line-height: 0%
}
<div class="nav">
  <ul>
    <li id="center">
      <a href="home.php"><img src="http://zdnet3.cbsistatic.com/hub/i/2015/09/01/cb834e24-18e7-4f0a-a9bf-4c2917187d3f/83bb139aac01023dbf3e55a3d1789ad8/google-new-logo.png"></a>
    </li>
  </ul>
</div>

Upvotes: 2

UncaughtTypeError
UncaughtTypeError

Reputation: 8752

Try something like the below. This method sets the img to display: inline-block, making it an inline element and allowing it to align center when declaring text-align: center on the parent element.

/*#center img {
  display: block;
  margin: auto;
}*/

#center {
    text-align: center;
}

ul {
    list-style: none;
    margin: auto;
    padding: 0px;
}

.nav {
    background: #ddd;
    border-bottom: 1px solid #bebebe;
}
<div class="nav">
  <ul>
    <li id="center">
      <a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=300%C3%97100&w=300&h=100"></a>
    </li>
  </ul>
</div>

The extra space is probably coming from a rogue browser/vendor style somewhere, suspect elements to look at are the ul and li which typically come with default padding & margin rules.
Inspect these elements through your browser developer tool/IDE and have a look at the "box model", or "layout", or "computed styles" depending on the browser you're using.

Upvotes: 1

Related Questions