Question

我已将div内的图片边框设置为无。我现在想要将该图像置于其包含的div中。我尝试过使用margin: 0 auto;但是没有用。

我确信我忽略了一些愚蠢的东西，但我想寻求stackoverflow社区的帮助，所以这不需要我花一小时盯着屏幕搞清楚。非常感谢。

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

这是CSS ...

#banner {
    height: 100px;
    width: 960px;
    padding-bottom: 10px;
}

#banner img {
    border: none;
    margin: 0 auto;
}

Answer 1

尝试将图片的display属性设置为block：

banner {
    height: 100px;
    width: 960px;
    padding-bottom: 10px;
}

banner img {
    border: none;
    display: block;
    margin: 0 auto;
}

Answer 2

将text-align: center应用于您的横幅div将使其内联和内联块子项（包含img标记）居中。

您的代码无效的原因是因为margin: 0 auto只会将块元素居中。

Answer 3

横向：试试

text-align:center;

：）

Answer 4

无论

banner {
     height:100px;
     text-align:center;
     width:960px;
     padding-bottom:10px;}

或者如果img具有特定大小，那么

banner img {
         display:block;
         width: <somevalue>px;
         border:none;
         margin:0 auto;
         }

会工作..

Answer 5

我相信它只是margin: auto;。不需要零。

Answer 6

经过多次彻底尝试将图像居中对齐div（垂直和/或水平）后，我理解了以下内容。
垂直居中对齐div中的图像。

.div {
 display:flex;
justify-content:center
}

水平居中对齐div中的图像。

.div {
display:flex;
align-items:center;
}

要在div中垂直和水平居中显示图像，有2个选项（1）

div {
display:flex;
align-item:center;
justify-content:center;
}

（2）

.div {
display:flex
}

.div > img {
margin: auto
}

如果在任何情况下都不起作用，请告诉我。

将图像居中在div中

6 个答案: