I need to center an element within a div while there is another element nearby. When I use text-align center, it places the element close but it's not going exactly where I'd like due to another element nearby. I want the logo element to center exactly while the social element floats to the right.
#header {
width: 100%;
height: auto;
text-align: center;
background-color: #ffffff;
}
#logo {
width: 30%;
margin: 10px auto;
display: inline-block;
text-align: center;
}
#logo img {
width: 100%;
height: auto;
margin: auto;
}
#social {
width: 15%;
display: inline;
float: right;
}
#social img {
width: 25%;
display: inline-block;
}<div id="header">
<div id="logo">
<img src="images/final/logo2.png">
</div>
<div id="social">
<img src="images/final/fb.png">
</div>
</div>To make the logo div centralize irrespective of the div taht holds the social link, you'll have to make the logo div absolute positioned.
Now, to make the absolute positioned logo div centered, you'll have to add left:0;right:0 to the CSS.
The revised CSS is as follows
CSS
#logo {
width: 30%;
margin: 10px auto;
position: absolute;
left: 0;
right: 0;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments