blocks|key|3577463|text|第一种方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3577464|将两个站点的边距设置为50%25|3577465|#image+{
+++margin-left:+50%25;
+++margin-right:+50%25;
}|code-block|syntax|javascript|3577466|这将使您的html对象居中。|3577467|第二种方式|3577468|有时这对我不起作用，所以我使用不推荐使用的标记<center>。|offset|length|style|CODE|3577469|<center>
+++<img+src="/img.png"+alt="blubb">
</center>|3577470|entityMap^0|0|0|0|0|0|N|8|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|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@$O|12|P|13|Q|R]]|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|$]]

<h2>first way</h2>

set margins to 50% on both sites

<pre><code>#image {
 margin-left: 50%;
 margin-right: 50%;
}
</code></pre>

this should center your html-object.

<h2>second way</h2>

sometimes this doesn't work for me, so i use the deprecated tag <code>&lt;center&gt;</code>.

<pre><code>&lt;center&gt;
 &lt;img src="/img.png" alt="blubb"&gt;
&lt;/center&gt;
</code></pre>

blocks|key|1260974|text|<img>不是块级标记(它的内联级标记)。所以在css中你有两个选择。一种是使用：display:inline-block，然后使用margin+:+0+auto，这是在一行中添加多个图像时使用的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1260975|第二个是对margin做同样的事情，但这次，使用display:block;；|1260976|我希望这能有所帮助。|1260977|entityMap^0|0|5|15|K|1U|F|0|5|6|O|E|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|K|$]]

<code>&lt;img&gt;</code> is not block level tag (its inline level tag ) . So you have two choices in css . one is Using : <code>display:inline-block</code> and then giving <code>margin : 0 auto</code> , which is used when you are adding more than one image in a line .

second is do the same about <code>margin</code> but this time , use <code>display:block;</code> ;

I wish this could help .

blocks|key|1260987|text|<....image+style="margin:0+auto“>+div+...<+/div+>|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1260988|如果你想把它放在页面的中心位置，添加宽度:100%25|1260989|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

&lt; div style="margin:0 auto" >
....image...
&lt; /div >

If you want it center of the page add width:100%

blocks|key|1261019|text|在CSS中水平居中显示图像(或任何元素)的标准方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1261020|img+{margin:0+auto;)|code-block|syntax|javascript|1261021|这是以下内容的简短版本：|1261022|img+(margin:0+auto+0+auto;}|1261023|反过来，这又是以下的简写：|1261024|img+{margin-top:0;+margin-right:auto;+margin-bottom:0;+margin-left:auto;}|1261025|=====|1261026|如果上面的标准方法不起作用(可能是因为样式表中其他地方的CSS冲突？)，如果您知道元素的宽度，还有另一种方法可以在CSS中水平居中显示图像(或任何元素)。|1261027|假设<img>的宽度为100px：|offset|length|style|CODE|1261028|img+{position:relative;+left:50%25;+margin-left:-50px;}|1261029|它之所以有效，是因为：|1261030|1)使用margin-left:-50px;时，您会告诉浏览器将元素的左边距视为恰好在100px宽度元素的中间|1261031|2)使用left:50%25；您将告诉浏览器将元素的左边距恰好定位在元素的父元素的中间|1261032|因此，当然，当您将元素的中间放在元素的父元素的中间时，您已经成功地将元素水平居中。|1261033|1261034|如果要针对当代浏览器设置样式，则可以使用CSS3中的灵活框布局模块|BOLD|1261035|img+{display:flex;+justify-content:center;}|1261036|entityMap^0|0|0|0|0|0|0|0|0|2|5|0|0|0|4|I|0|0|0|0|K|4|Q|7|0|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1H|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1I|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1J|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1K|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|1L|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1N|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1O|8|@$U|1P|V|1Q|W|X]]|9|@]|A|$]]|$1|Y|3|Z|5|D|7|1R|8|@]|9|@]|A|$E|F]]|$1|10|3|11|5|6|7|1S|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1T|8|@$U|1U|V|1V|W|X]]|9|@]|A|$]]|$1|14|3|15|5|6|7|1W|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|1X|8|@]|9|@]|A|$]]|$1|18|3|P|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|19|3|1A|5|6|7|1Z|8|@$U|20|V|21|W|1B]|$U|22|V|23|W|1B]]|9|@]|A|$]]|$1|1C|3|1D|5|D|7|24|8|@]|9|@]|A|$E|F]]|$1|1E|3|-4|5|6|7|25|8|@]|9|@]|A|$]]]|1F|$]]

The standard way to horizontally center an image (or any element) in CSS is:

<pre><code>img {margin:0 auto;)
</code></pre>

This is the short version of:

<pre><code>img (margin:0 auto 0 auto;}
</code></pre>

which, in turn, is shorthand for:

<pre><code>img {margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;}
</code></pre>

<h1>=====</h1>

If the standard method above does not work (perhaps because of conflicting CSS elsewhere in the stylesheet?), there is an alternative way to horizontally center an image (or any element) in CSS IF you know the width of the element.

Assuming the width of the <code>&lt;img&gt;</code> is 100px:

<pre><code>img {position:relative; left:50%; margin-left:-50px;}
</code></pre>

It works because:

1) with <code>margin-left:-50px;</code> you are telling the browser to consider the left-hand margin of the element as being exactly in the middle of the 100px-width element

2) with left:50%; you are telling the browser to position the left-hand margin of the element exactly in the middle of the element's parent

And so, of course, when you place the middle of the element in the middle of the element's parent, you have succeeded in horizontally centering the element.

<h1>=====</h1>

If you are styling for contemporary browsers, you can use the Flexible Box Layout module from CSS3:

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

How can I center my image in white space?

I am using HTML, PHP or CSS. I am not sure of the best approach, but that is what I have involved so far.

I only saw how to align an image within text on <code>w3schools.com</code>. My other attempts, such as:

<pre><code>#image {
 margin-left: auto;
 margin-right: auto;
}
</code></pre>

only make the image disappear.

How can I center my image in white space?

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

如何在空白区域居中显示图像？我使用的是HTML、PHP或CSS。我不确定最好的方法，但这就是我到目前为止所涉及的。我只看到了如何在w3schools.com上对齐文本中的图像。我的其他尝试，例如：#image {    margin-left: auto;    margin-right: auto;}只会让图像消失。

问如何在空白区域居中显示图像？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在空白区域居中显示图像？EN