Centering an image within a div
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;开发者_JAVA技巧
margin: 0 auto;
}
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;
}
Applying text-align: center to your banner div will center its inline and inline-block children (which encompasses the img tag).
The reason why your code wasn't working is because margin: 0 auto will only center block elements.
horizontal: just try
text-align:center;
:)
Either
banner {
height:100px;
text-align:center;
width:960px;
padding-bottom:10px;}
or if the img is of specific size then
banner img {
display:block;
width: <somevalue>px;
border:none;
margin:0 auto;
}
will work ..
I believe it is just margin: auto;. No zero needed.
After many exhaustive tries to center align an image in a div (vertically and/or horizontally), I understood the following.
To vertically center align an image in a div.
.div {
display:flex;
justify-content:center
}
To horizontally center align an image in a div.
.div {
display:flex;
align-items:center;
}
To center both vertically and horizontally an image in a div, there are 2 options (1)
div {
display:flex;
align-items:center;
justify-content:center;
}
(2)
.div {
display:flex
}
.div > img {
margin: auto
}
加载中,请稍侯......
精彩评论