Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
361 views
in Technique[技术] by (71.8m points)

html - 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;
    margin: 0 auto;
}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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;
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...