Reputation: 127
I have an unordered list that contains several list elements inside. Also inside is an image element which is to be centered. I tried to center it using the margin: auto; property but since there are list elements on the side, it takes that into account when centering itself. How do I center the image in respect to it's container?
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
}
.nav li {
float: left;
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
display: block;
margin: auto;
height: 21px;
width: 24px;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="assets/image/twitter-icon.png" alt="Twitter Icon">
</ul>
</nav>
Upvotes: 1
Views: 110
Reputation: 16865
Put your img
element into li
and do some changes in your css like below snippet:
.nav ul {
width: 800px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
padding: 0;
list-style-type: none;
text-align: center;
}
.nav li {
display: inline-block;
vertical-align: middle;
margin: 5px 10px;
}
.nav img {
display: block;
margin: auto;
}
.nav ul:before,
.nav ul:after {
content: "";
display: table;
}
.nav ul:after {
clear: both;
}
<!--html-->
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<li><img src="//login.create.net/images/icons/user/twitter_30x30.png" alt="Twitter Icon"></li>
</ul>
</nav>
Upvotes: 0
Reputation: 12969
1) All Elements be Center
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
}
.nav li {
float: left;<------Remove
display: inline-block;<-----------Add
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;<---------Change to margin-left: 0px;------
}
.nav img {
display: block;<----------Change to display: inline-block;---
margin: auto;<---------Remove
height: 21px;
width: 24px;
}
.clearfix{<-----------Add this Selector
text-align: center;
width: 100%;
padding-left: 0;
}
Full Code:
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
}
.nav li {
display: inline-block;
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 0px;
}
.nav img {
display: inline-block;
height: 21px;
width: 24px;
}
.clearfix{
text-align: center;
width: 100%;
padding-left: 0;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" alt="Twitter Icon">
</ul>
</nav>
2) Just image be Center
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
position: relative;<---------Add
}
.nav li {
float: left;<---------remove
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
display: block;<-------Change To display: inline-block;---
margin: auto;<----------remove---------
right: 0;<--------------Add
position: absolute;<-------------Add
height: 21px;
width: 24px;
}
.clearfix { <----------------Add
width: 50%;
padding-left: 0;
position: relative;
}
Full Code:
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
position: relative;
}
.nav li {
display: inline-block;
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
display: inline-block;
height: 21px;
width: 24px;
right: 0;
position: absolute;
}
.clearfix {
width: 50%;
padding-left: 0;
position: relative;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" alt="Twitter Icon">
</ul>
</nav>
Upvotes: 0
Reputation: 4948
You may have to position the image absolute
into the nav
element using:
position: absolute;
left: 50%;
transform: translateX(-50%);
Also position:relative
the nav
element.
This way the image ignores whatever is inside the nav
element.
body{
margin:0px;
}
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
position:relative;
}
.nav li {
vertical-align: top;
margin: 5px 10px;
display: inline;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 21px;
width: 24px;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="assets/image/twitter-icon.png" alt="Twitter Icon">
</ul>
</nav>
Upvotes: 1
Reputation: 4202
You can use display:inline-block
to get it.
.nav img {
display: inline-block; /*Add this*/
vertical-align: middle; /*Add this*/
height: 21px;
width: 24px;
}
.nav li {
display:inline-block; /*Add this*/
vertical-align: middle; /*Add this*/
margin: 5px 10px;
}
.nav {
text-align:center; /*Add this*/
}
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
text-align:center;
}
.nav li {
display:inline-block;
vertical-align: middle;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
display: inline-block;
vertical-align: middle;
height: 21px;
width: 24px;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="http://lorempixel.com/200/200/" alt="Twitter Icon">
</ul>
</nav>
Upvotes: 0