Menu
I have already set the border of an image within a div to be none. I now want to center that image within its containing div. I have tried using the margin: 0 auto; but that did not work.
I am sure I am overlooking something stupid but I would like to enlist the help of the stackoverflow community so this doesn't take me an hour of staring at the screen to figure out. Thanks a lot.
<body>
<div id="wrapper">
<div id="banner">
<img src="logo3.png"/>
<!--<img src="kslf_logo.png"/>
<img src="logo2.png" title="Katie Samson Lacrosse Festival Logo"/>-->
<div id="social_network">
<a href="#" target="_blank" title="Check out the Facebook Page!">Facebook</a>
</div>
</div>
</div>
</body>
Here is the CSS...
#banner {
height: 100px;
width: 960px;
padding-bottom: 10px;
}
#banner img {
border: none;
margin: 0 auto;
}
818
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
Using the <center> tag You can center a picture by enclosing the <img> tag in the <center></center> tags. This action centers that, and only that, picture on the web page. It should be noted that this method is deprecated in HTML5 and will not always work in all browsers going forward.
To center an image, we have to set the value of margin-left and margin-right to auto and make it a block element by using the display: block; property. If the image is in the div element, then we can use the text-align: center; property for aligning the image to center in the div.
Try setting the image’s display property to block:
banner {
height: 100px;
width: 960px;
padding-bottom: 10px;
}
banner img {
border: none;
display: block;
margin: 0 auto;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
