blocks|key|1669074|text|将text-align:+center;+CSS声明添加到父.box而不是子.box+img。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1669075|.box+{
++++height:+100%25;
++++width:+450px;
++++border:+2px+solid+red;
++++background:+green;
++++overflow:+hidden;
++++text-align:+center;++/*+align+center+all+inline+elements+*/
}|code-block|syntax|javascript|1669076|这是。|1669077|更新|1669078|图像下面似乎还有一个5px间隙，它属于行高保留字符。要从像<img>这样的内联元素中删除它，可以使用vertical-align:+bottom|1669079|.box+img+{
++++height:+100%25;
++++width:+auto;
++++vertical-align:+bottom;+/*+<--+fix+the+vertical+gap+*/
}|1669080|1669081|entityMap^0|1|J|U|4|12|8|0|0|0|0|A|3|T|5|1E|M|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|14|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1C|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|U|$]]

Add <code>text-align: center;</code> CSS declaration to the parent <code>.box</code> instead of the children <code>.box img</code>.

<pre><code>.box {
 height: 100%;
 width: 450px;
 border: 2px solid red;
 background: green;
 overflow: hidden;
 text-align: center; /* align center all inline elements */
}
</code></pre>

Here is the <a href="http://jsfiddle.net/qolami/Ex5ax/10/">Fiddle</a>.

<h2>Update</h2>

It seems there's also a <code>5px</code> gap under the image, It belongs to the line height reserved characters. To remove that from inline elements like <code>&lt;img&gt;</code> you can use <code>vertical-align: bottom</code>:

<pre><code>.box img {
 height: 100%;
 width: auto;
 vertical-align: bottom; /* &lt;-- fix the vertical gap */
}
</code></pre>

<a href="http://jsfiddle.net/qolami/Ex5ax/25/">JSFiddle Demo #2</a>

blocks|key|1669088|text|您需要将text-align:+center;从图像的CSS移到其父div的CSS，这样CSS看起来就像这样：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1669089|.box+{
++++height:+100%25;
++++width:+450px;
++++border:+2px+solid+red;
++++background:+green;
++++overflow:+hidden;+
++++text-align:center
}

.box+img+{
++++height:+100%25;
++++width:+auto;
}|code-block|syntax|javascript|1669090|就是这样！|1669091|entityMap^0|4|J|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

You'll need to move the <code>text-align: center;</code> from the CSS for the image to the CSS for its parent div, so your CSS looks like this:

<pre><code>.box {
 height: 100%;
 width: 450px;
 border: 2px solid red;
 background: green;
 overflow: hidden; 
 text-align:center
}

.box img {
 height: 100%;
 width: auto;
}
</code></pre>

And that's it!

blocks|key|5631917|text|如果您的父div具有宽度，请尝试将图像边距属性设置为margin:0+auto，这样图像将按照每个父目录居中显示|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5631918|entityMap^0|Q|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|$]]

Try giving the image margin property as <code>margin:0 auto</code>, if your parent div has width so the image will be centered as per parent

blocks|key|2103065|text|我会将其添加到.box+img中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2103066|.box+img+{+margin-left:+-25%25;+margin-top:+-25%25;+}|code-block|syntax|javascript|2103067|您可能需要调整每个图像的这些值，或者可能不是由于尺寸的原因。|2103068|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|$]]

I would add this to .box img.

<pre><code>.box img { margin-left: -25%; margin-top: -25%; }
</code></pre>

You would probably need to ajust these per image, or maybe not due to the dimensions.

blocks|key|4213935|text|如果有人在这里寻找解决方案，这里有一个使用display:+flex的解决方案。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4213936|.box+{
+++display:flex;
+++justify-content:+center;
+++align-items:+center;
+++background:+green;
+++border:+2px+solid+red;
+++height:+100%25;
+++width:+450px;
+++overflow:+hidden;+++
}
.box+img+{
++justify-content:+center;
++align-items:+center;
}|code-block|syntax|javascript|4213937|entityMap^0|L|D|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

In case anyone lands up here looking for a solution, here's one using <code>display: flex</code>.
<pre><code>.box {
 display:flex;
 justify-content: center;
 align-items: center;
 background: green;
 border: 2px solid red;
 height: 100%;
 width: 450px;
 overflow: hidden; 
}
.box img {
 justify-content: center;
 align-items: center;
}
</code></pre>

How I can set center an image element inside a parent div? I would like to do this so that the middle of the image is always in the center of his parent. Also I want the image to always have 100% height (note: I don't want to stretch the image width).

See here for an example: <a href="http://jsfiddle.net/Ex5ax/5/" rel="noreferrer">http://jsfiddle.net/Ex5ax/5/</a>

<pre><code>&lt;div class="box"&gt;
 &lt;img src='featured.jpg' /&gt;
&lt;/div&gt;
</code></pre>

CSS: 

<pre><code>.box { height: 100%; width: 450px; border: 2px solid red; background: green; overflow: hidden; }
.box img { height: 100%; width: auto; text-align: center; }
</code></pre>

Center image element in parent div

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

如何在父div中设置图像元素的居中？我想这样做，以便图像的中间始终位于其父母的中心。另外，我希望图像始终有100%的高度(注意:我不想拉伸图像的宽度)。请看这里的示例：<div class="box"> <img src='featured.jpg' /></div>CSS：.box { height: 100%; ...

问父div中的居中图像元素
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问父div中的居中图像元素EN