blocks|key|13432|text|尝试将图像的display属性设置为block|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|13433|banner+{
++++height:+100px;
++++width:+960px;
++++padding-bottom:+10px;
}

banner+img+{
++++border:+none;
++++display:+block;
++++margin:+0+auto;
}|code-block|syntax|javascript|13434|entityMap^0|6|7|I|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

Try setting the image’s <code>display</code> property to <code>block</code>:

<pre><code>banner {
 height: 100px;
 width: 960px;
 padding-bottom: 10px;
}

banner img {
 border: none;
 display: block;
 margin: 0 auto;
}
</code></pre>

blocks|key|761685|text|将text-align:+center应用于banner+div将使其内联和内联块子元素(包含img标记)居中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|761686|你的代码不能工作的原因是因为margin:+0+auto只会将块元素居中。|761687|entityMap^0|1|I|0|E|E|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

Applying <code>text-align: center</code> 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 <code>margin: 0 auto</code> will only center block elements.

blocks|key|13391|text|水平:试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|13392|text-align:center;|code-block|syntax|javascript|13393|:)|13394|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

horizontal: just try

<pre><code>text-align:center;
</code></pre>

:)

blocks|key|990222|text|任一|type|unstyled|depth|inlineStyleRanges|entityRanges|data|990223|banner+{
+++++height:100px;
+++++text-align:center;
+++++width:960px;
+++++padding-bottom:10px;}|code-block|syntax|javascript|990224|或者如果img具有特定大小，则|990225|banner+img+{
+++++++++display:block;
+++++++++width:+<somevalue>px;
+++++++++border:none;
+++++++++margin:0+auto;
+++++++++}|990226|将会起作用..|990227|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Either

<pre><code>banner {
 height:100px;
 text-align:center;
 width:960px;
 padding-bottom:10px;}
</code></pre>

or if the img is of specific size then 

<pre><code>banner img {
 display:block;
 width: &lt;somevalue&gt;px;
 border:none;
 margin:0 auto;
 }
</code></pre>

will work ..

blocks|key|990243|text|我相信这只是margin:+auto;。不需要零。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|990244|entityMap^0|6|D|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

I believe it is just <code>margin: auto;</code>. No zero needed.

blocks|key|13523|text|在多次详尽地尝试在div中将图像居中对齐(垂直和/或水平)后，我理解了以下内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|13524|要在div中垂直居中对齐图像，请执行以下操作。|13525|.div+{
+display:flex;
justify-content:center
}|code-block|syntax|javascript|13526|在div中水平居中对齐图像。|13527|.div+{
display:flex;
align-items:center;
}|13528|要在div中既垂直居中又水平居中，有两个选项(1)|13529|div+{
display:flex;
align-items:center;
justify-content:center;
}|13530|(2)|13531|.div+{
display:flex
}

.div+>+img+{
margin:+auto
}|13532|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

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.

<pre><code>.div {
 display:flex;
justify-content:center
}
</code></pre>

To horizontally center align an image in a div.

<pre><code>.div {
display:flex;
align-items:center;
}
</code></pre>

To center both vertically and horizontally an image in a div, there are 2 options
(1)

<pre><code>div {
display:flex;
align-items:center;
justify-content:center;
}
</code></pre>

(2)

<pre><code>.div {
display:flex
}

.div &gt; img {
margin: auto
}
</code></pre>

I have already set the border of an image within a <code>div</code> to be none. I now want to center that image within its containing div. I have tried using the <code>margin: 0 auto;</code> 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.

<pre><code>&lt;body&gt;
 &lt;div id="wrapper"&gt;
 &lt;div id="banner"&gt;

 &lt;img src="logo3.png"/&gt;
 &lt;!--&lt;img src="kslf_logo.png"/&gt;
 &lt;img src="logo2.png" title="Katie Samson Lacrosse Festival Logo"/&gt;--&gt;


 &lt;div id="social_network"&gt;
 &lt;a href="#" target="_blank" title="Check out the Facebook Page!"&gt;Facebook&lt;/a&gt;
 &lt;/div&gt;

 &lt;/div&gt;
 &lt;/div&gt;
&lt;/body&gt;
</code></pre>

Here is the CSS...

<pre><code>#banner {
 height: 100px;
 width: 960px;
 padding-bottom: 10px;
}

#banner img {
 border: none;
 margin: 0 auto;
}
</code></pre>

Centering an image within a div

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我已经将div中图像的边框设置为none。现在，我想要将该图像放在其包含的div中。我试过使用margin: 0 auto;，但不起作用。我确信我忽略了一些愚蠢的事情，但我想寻求stackoverflow社区的帮助，这样我就不需要花一个小时盯着屏幕就能搞清楚。非常感谢。<body> <div id="wrapper"> <div id="banner">

问使图像在div中居中
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使图像在div中居中EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使图像在div中居中
EN