shreydan
shreydan

Reputation: 45

How to center the entire div tag along with it's elements?

I need to center the div tag and its elements. I've tried giving width and margin-left: auto; and margin-top: auto; but it doesn't work!

I need to center the div vertically.

HTML:

 <div class="nav">
  <ul>
    <li><a href="http://twitter.com/login"><img src="images/twitter.png" /></a></li>
    <li><a href="http://quora.com"><img src="images/quora.png" /></a></li>
    <li><a href="http://youtube.com"><img src="images/youtube.png" /></a></li>
    <li><a href="http://web.whatsapp.com"><img src="images/whatsapp.png" /></a></li>
    <li><a href="http://shreydan.tumblr.com"><img src="images/tumblr.png" /></a></li>
  </ul>
</div>

CSS:

.nav {
  height: 70px;
  width: 100%;
  background-color: #aed003;
}

.nav ul {
  margin-top: 0px;
  padding: 10px 0px;
}

.nav ul li {
  margin: 0px;
  list-style: none;
}

.nav ul li a {
  float: left;
  display: inline-block;
  margin: 0px 10px;
}

.nav ul li a img {
  height: 50px;
  max-height: 50px;
  width: 50px;
  max-width: 50px;
}

In it's current state:

It works now, thank you hungerstar and Nick R for the answers and thank you to others too. @hungerstar : Aligning the div vertically: https://jsfiddle.net/e6aq6f1w/3/ @nick-r : Aligning the elements of div horizontally: https://jsfiddle.net/f4fjxxj8/

Upvotes: 0

Views: 101

Answers (5)

shreydan
shreydan

Reputation: 45

Alright, as the solutions to this question was answered by different people, here is the final solution:

nick-r : For aligning the elements of div in the center horizontally:

.nav ul {
  margin-top: 0px;
  padding: 10px 0px;
  text-align:center;
}

.nav ul li {
  margin: 0px;
  list-style: none;
  display:inline-block;
}

.nav ul li a {
  margin: 0px 10px;
}

hungerstar : For centering the div tag vertically:

.nav {
  height: 70px;
  width: 100%;
    position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #aed003;
}

Upvotes: 0

hungerstar
hungerstar

Reputation: 21725

Here is one solution to vertically and horizontally centering and element in the middle of a page. You will need to use fixed positioning and translate.

.nav {
  /* centering start */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* centering end */
  display: inline;
  background-color: #aed003;
}
.nav ul,
.nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav ul {
  padding: 0 5px
}
.nav li {
  float: left;
  padding: 10px 5px;
}
.nav ul li a img {
  display: block;
  max-height: 50px;
  max-width: 50px;
}
<div class="nav">
  <ul>
    <li>
      <a href="http://twitter.com/login">
        <img src="http://placehold.it/75x75?text=one">
      </a>
    </li>
    <li>
      <a href="http://quora.com">
        <img src="http://placehold.it/75x75?text=two">
      </a>
    </li>
    <li>
      <a href="http://youtube.com">
        <img src="http://placehold.it/75x75?text=three">
      </a>
    </li>
    <li>
      <a href="http://web.whatsapp.com">
        <img src="http://placehold.it/75x75?text=four">
      </a>
    </li>
    <li>
      <a href="http://shreydan.tumblr.com">
        <img src="http://placehold.it/75x75?text=five">
      </a>
    </li>
  </ul>
</div>

Upvotes: 0

Claude
Claude

Reputation: 11

Remove float: left; from .nav ul li a and put display: inline-block in .nav ul li

Upvotes: 0

Mohammad Usman
Mohammad Usman

Reputation: 39342

Use css flexbox. Add following css to ul.

.nav ul {
    justify-content: center;
    display: flex;
}

.nav {
  height: 70px;
  width: 100%;
  background-color: #aed003;
}

.nav ul {
  margin-top: 0;
  padding: 10px 0;
  justify-content: center;
  display: flex;
}

.nav ul li {
  border: 1px solid #000;
  margin: 0;
  list-style: none;
}

.nav ul li a {
  display: inline-block;
  margin: 0 10px;
}

.nav ul li a img {
  height: 50px;
  max-height: 50px;
  width: 50px;
  max-width: 50px;
}
<div class="nav">
  <ul>
    <li><a href="http://twitter.com/login"><img src="images/twitter.png" /></a></li>
    <li><a href="http://quora.com"><img src="images/quora.png" /></a></li>
    <li><a href="http://youtube.com"><img src="images/youtube.png" /></a></li>
    <li><a href="http://web.whatsapp.com"><img src="images/whatsapp.png" /></a></li>
    <li><a href="http://shreydan.tumblr.com"><img src="images/tumblr.png" /></a></li>
  </ul>
</div>

Upvotes: 0

Nick R
Nick R

Reputation: 7794

Remove float:left and replace it with display:inline-block;, then on the parent ul add text-align:center - https://jsfiddle.net/f4fjxxj8/

Upvotes: 1

Related Questions