CODEWITHSUNDEEP
htmlcss
Vojta Matras
Vojta Matras

Reputation: 71

how to center image in li

I have problem with centering image in the li element. I have this code in html

<nav role="navigation">
    <ul class="main-nav">
      <li><a href=home.html>Home</a></li>
      <li><a href=world.html>World</a></li>
      <li><a href=sport.html>Sport</a></li>
      <li><a href=lifestyle.html>Lifestyle</a></li>
      <li><a href=health.html>Health</a></li>
      <li><a href=fashion.html>Fashion</a></li>
      <li><a href=technology.html>Technology</a></li>
      <li><a href=postpage.html>Post & Pages</a></li>
      <li><img src="images/all/magnifier.png" alt="icon for search box"/></li>
    </ul>
  </nav>

and this code in css

nav {
clear: both;
}
.main-nav {
list-style-type: none;
float: left;
border: 1px solid Gainsboro;
width: 100%;
height: 50px;
}
.main-nav li {
float: left;
font-size: 12px;
}
.main-nav li:last-child{
float: right;
border-left: 1px solid Gainsboro;
height: 50px;
width: 50px;
}
.main-nav li a {
display: block;
text-decoration: none;
color: #8a8a8a;
display: block;
padding: 17px 30px;
}
.main-nav li a:hover {
background-color: #02a5e0;
color: white;
}
.main-nav li img {
display: block;
margin: 0 auto;
}

So, i need center the image in his box, when I added

display: block;
margin: 0 auto;

Image only shifted to right, but not down.

picture of what I need

Upvotes: 1

Views: 660

Answers (4)

Squish
Squish

Reputation: 457

Try adding this class to your li

.has-image-centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align:center;
}

Upvotes: 2

SantoshK
SantoshK

Reputation: 1877

Add to .main-nav li:last-child img to resolve the issue

nav {
clear: both;
}
.main-nav {
list-style-type: none;
float: left;
border: 1px solid Gainsboro;
width: 100%;
height: 50px;
}
.main-nav li {
float: left;
font-size: 12px;
}
.main-nav li:last-child{
border-left: 1px solid Gainsboro;
height: 50px;
width: 50px;
margin:0 10px;

}
.main-nav li:last-child img{margin-top:10px}
.main-nav li a {
display: block;
text-decoration: none;
color: #8a8a8a;
display: block;
padding: 17px 30px;
}
.main-nav li a:hover {
background-color: #02a5e0;
color: white;
}
.main-nav li img {
display: block;
margin: 0 auto;
}
<nav role="navigation">
    <ul class="main-nav">
      
      <li><a href=home.html>Home</a></li>
  <li><a href=world.html>World</a></li>
  <li><a href=sport.html>Sport</a></li>
  <li><a href=lifestyle.html>Lifestyle</a></li>
  <li><a href=health.html>Health</a></li>
  <li><a href=fashion.html>Fashion</a></li>
  <li><a href=technology.html>Technology</a></li>
  <li><a href=postpage.html>Post & Pages</a></li>
      <li><img src="https://lh6.googleusercontent.com/-kUA-QmkzBXQ/AAAAAAAAAAI/AAAAAAAAAUE/M4iO6wJL4e0/photo.jpg?sz=32" alt="icon for search box"/></li>
    </ul>
  </nav>

Upvotes: 0

Ernesto
Ernesto

Reputation: 944

Use flex-box.

display: flex;
align-items: center;

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Julian
Julian

Reputation: 21

Try to add display:flex to the <li> where you want the image to be center. Then add justify-content: center;, align-items: center; and flex-direction: column;

That should work!

Upvotes: 0

Related Questions