Reputation: 45
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;
}
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
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
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
Reputation: 11
Remove float: left;
from .nav ul li a
and put display: inline-block
in .nav ul li
Upvotes: 0
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
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