Html 在 div 内水平居中图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10989238/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center image horizontally within a div
提问by Jacob Windsor
This is probably a stupid question but since the usual ways of center aligning an image are not working I thought I would ask. How can I center align (horizontally) an image inside its container div?
这可能是一个愚蠢的问题，但由于通常的图像居中对齐方式不起作用，我想我会问。如何在其容器 div 内居中对齐（水平）图像？
Here's the HTML and CSS. I've also included the CSS for the other elements of the thumbnail. It runs in descending order so the highest element is the container of everything and the lowest is inside everything.
这是 HTML 和 CSS。我还包括缩略图的其他元素的 CSS。它按降序运行，因此最高元素是所有内容的容器，最低元素是所有内容。
#thumbnailwrapper {
color: #2A2A2A;
margin-right: 5px;
border-radius: 0.2em;
margin-bottom: 5px;
background-color: #E9F7FE;
padding: 5px;
border: thin solid #DADADA;
font-size: 15px
}
#artiststhumbnail {
width: 120px;
height: 108px;
overflow: hidden;
border: thin solid #DADADA;
background-color: white;
}
#artiststhumbnail:hover {
left: 50px
}<!--link here-->
<a href="NotByDesign">
<div id="thumbnailwrapper">
<a href="NotByDesign">
<!--name here-->
<b>Not By Design</b>
<br>
<div id="artiststhumbnail">
<a href="NotByDesign">
<!--image here-->
<img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
</a>
</div>
<div id="genre">Punk</div>
</div>Okay, I have added the markup without the PHP in so should be easier to see. Neither solution seems to work in practice. The text at top and bottom cannot be centered and the image should be centered within its container div. The container has overflow hidden so I want to see the center of the image as that's normally where the focus is.
好的，我添加了没有 PHP 的标记，所以应该更容易看到。这两种解决方案在实践中似乎都不起作用。顶部和底部的文本不能居中，图像应在其容器 div 内居中。容器已隐藏溢出，因此我想查看图像的中心，因为这通常是焦点所在的位置。
回答by Marvo
The CSS Guysuggests the following:
CSS Guy建议如下：
So, translating, perhaps:
所以，翻译，也许：
#artiststhumbnail a img {
display:block;
margin:auto;
}
Here's my solution in: http://jsfiddle.net/marvo/3k3CC/2/
这是我的解决方案：http: //jsfiddle.net/marvo/3k3CC/2/
回答by Manoj Kumar
CSS flexboxcan do it with justify-content: centeron the image parent element. To preserve the aspect ratio of the image, add align-self: flex-start;to it.
CSS flexbox可以justify-content: center在图像父元素上执行此操作。要保留图像的纵横比，请添加align-self: flex-start;到其中。
HTML
HTML
<div class="image-container">
<img src="http://placehold.it/100x100" />
</div>
CSS
CSS
.image-container {
display: flex;
justify-content: center;
}
Output:
输出：
body {
background: lightgray;
}
.image-container {
width: 200px;
display: flex;
justify-content: center;
margin: 10px;
padding: 10px;
/* Material design properties */
background: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
width: 500px;
align-self: flex-start; /* to preserve image aspect ratio */
}
.image-3 {
width: 300px;
align-self: flex-start; /* to preserve image aspect ratio */
}<div class="image-container">
<img src="http://placehold.it/100x100" />
</div>
<div class="image-container image-2">
<img src="http://placehold.it/100x100/333" />
</div>
<div class="image-container image-3">
<img src="http://placehold.it/100x100/666" />
</div>回答by mk.hd
I just found this solution below on the W3 CSS page and it answered my problem.
我刚刚在 W3 CSS 页面上找到了这个解决方案，它回答了我的问题。
img {
display: block;
margin-left: auto;
margin-right: auto;
}
回答by Mehmet Yaden
This also would do it
这也行
#imagewrapper {
text-align:center
}
#imagewrapper img {
display:inline-block;
margin:0 5px
}
回答by Kevin
The best thing I have found (that seems to work in all browsers) for centering an image, or any element, horizontally is to create a CSS class and include the following parameters:
我发现（似乎适用于所有浏览器）将图像或任何元素水平居中的最好方法是创建一个 CSS 类并包含以下参数：
CSS
CSS
.center {
position: relative; /* where the next element will be automatically positioned */
display: inline-block; /* causes element width to shrink to fit content */
left: 50%; /* moves left side of image/element to center of parent element */
transform: translate(-50%); /* centers image/element on "left: 50%" position */
}
You can then apply the CSS class you created to your tag as follows:
然后，您可以将您创建的 CSS 类应用到您的标签，如下所示：
HTML
HTML
<img class="center" src="image.jpg" />
You can also inline the CSS in your element(s) by doing the following:
您还可以通过执行以下操作将 CSS 内联到您的元素中：
<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />
...but I wouldn't recommend writing CSS inline because then you have to make multiple changes in all your tags using your centering CSS code if you ever want to change the style.
...但我不建议内联编写 CSS，因为如果您想更改样式，则必须使用居中的 CSS 代码对所有标签进行多项更改。
回答by Cherno
This is what I ended up doing:
这就是我最终做的：
<div style="height: 600px">
<img src="assets/zzzzz.png" alt="Error" style="max-width: 100%;
max-height: 100%; display:block; margin:auto;" />
</div>
Which will limit the image height to 600px and will horizontally-center (or resize down if the parent width is smaller) to the parent container, maintaining proportions.
这会将图像高度限制为 600 像素，并将水平居中（如果父宽度较小，则向下调整大小）到父容器，保持比例。
回答by Jared Farrish
I am going to go out on a limb and say that the following is what you are after.
我要冒昧地说，以下是你所追求的。
Note, the following I believe was accidentally omitted in the question (see comment):
请注意，我认为问题中不小心遗漏了以下内容（请参阅评论）：
<div id="thumbnailwrapper"> <!-- <<< This opening element -->
<div id="artiststhumbnail">
...
So what you need is:
所以你需要的是：
#artiststhumbnail {
width:120px;
height:108px;
margin: 0 auto; /* <<< This line here. */
...
}
回答by atlas
Add this to your CSS:
将此添加到您的 CSS：
#artiststhumbnail a img {
display: block;
margin-left: auto;
margin-right: auto;
}
Just referencing a child element which in that case is the image.
只是引用一个子元素，在这种情况下是图像。
回答by kalariya parikshith
To center an image horizontally, this works:
要将图像水平居中，这有效：
<p style="text-align:center"><img src=""></p>
回答by V-SHY
Put an equal pixel padding for left and right:
为左右放置一个相等的像素填充：
<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">
