固定大小的容器元素中的中心图像（CSS、HTML）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9912129/
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 in container element with fixed size (CSS, HTML)
提问by AGuyCalledGerald
I want to display images on a .net page which I load from database (the amount can thus vary). All images have different widths and heights up to 130px and 60px respectively. I want to put the images into container elements with a fixed width of 130px and a fixed height of 60px. The images should be centered vertically and horizontally. The container elements should be aligned horizontally if possible.
I tried div(with float) and span. With div, I get the fixed sizes, but cannot center the images. With span, I can center, but not set any size. If I put span into div, it seems to behave like div (centering is ignored).
我想在从数据库加载的 .net 页面上显示图像（因此数量可能会有所不同）。所有图像都有不同的宽度和高度，分别高达 130 像素和 60 像素。我想将图像放入固定宽度为 130 像素和固定高度为 60 像素的容器元素中。图像应垂直和水平居中。如果可能，容器元素应水平对齐。
我试过div(with float) 和span。使用 div，我获得固定尺寸，但无法将图像居中。使用跨度，我可以居中，但不能设置任何大小。如果我将 span 放入 div，它似乎表现得像 div（忽略居中）。
回答by S.Visser
You can see it work on http://jsfiddle.net/km5dk/8/
你可以看到它在http://jsfiddle.net/km5dk/8/ 上工作
But I think you search something like this.
但我认为你搜索这样的东西。
### HTML ###
<div id="container">
<div class="image-container">
<img src="#" alt="A image" />
</div>
</div>?
### CSS ###
#container {
width: 130px;
height: 60px;
display: table;
background-color: #ccc;
}
#container .image-container {
text-align: center;
vertical-align: middle;
display: table-cell;
}
#container .image-container img {
max-width: 160px;
max-height: 60px;
}
回答by sjcoder
make image center
使图像中心
.image-container {
width: 500px;
height: 500px;
position: relative;
}
.image-container img {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto auto;
}
auto-resize an image to fit a div container
自动调整图像大小以适合 div 容器
.image-container img {
max-height: 100%;
max-width: 100%;
}
回答by allnodcoms
Thinking a little outside of the box (excuse the deliberate pun!) you could use background-sizeon your container's CSS rule, and background-image: url(this_image.jpg);as an inline style on the individual containers themselves.
This would handle all of the scaling for you in a smaller and neater package.
跳出框框思考（原谅故意的双关语！）您可以background-size在容器的 CSS 规则上使用，并background-image: url(this_image.jpg);作为单个容器本身的内联样式。这将在一个更小更整洁的包中为您处理所有缩放。
Setting background-size: cover;would scale the image so that the smallest dimension matched (though there may be some cropping), and background-size: contain;would ensure the entire image fitted.
设置background-size: cover;将缩放图像，以便最小尺寸匹配（尽管可能会有一些裁剪），并background-size: contain;确保整个图像适合。
It's another option...
这是另一种选择...
Danny
丹尼
回答by ThomasAFink
Use positioning. The following worked for me:
使用定位。以下对我有用：
div{
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
回答by Dan Nick
With Bootstrap 3 you can add an img-responsive center-block class to center an image
使用 Bootstrap 3，您可以添加一个 img-responsive center-block 类来使图像居中
<img class="img-responsive center-block" src="my_image.png" />
回答by user92254225
if you have an IMG tag inside the divs, use margin: 0px auto on the div css;
如果您在 div 中有一个 IMG 标签，请在 div css 上使用 margin: 0px auto ；
For vertical:
对于垂直：
display: table-cell; vertical-align: middle;
显示：表格单元格；垂直对齐：中间；
回答by Jeremy Trifilo
I'm still learning myself just started doing HTML/CSS about two weeks ago, but this seems to work great has hover, click, description box, title box, and centered image.
我还在学习自己大约两周前才开始做 HTML/CSS，但这似乎很好用，有悬停、点击、描述框、标题框和居中的图像。
You can put the CSS code in a separate style sheet as well. I thought I'd keep them together for the post.
您也可以将 CSS 代码放在单独的样式表中。我想我会把他们放在一起来发帖。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:black;
color:white;
}
#container
{
width:18em;
height:18em;
}
#title-image
{
background-image:url('http://www.gravatar.com/avatar/cd1954c9caf7ffc02ab18137967c4bc9?s=32&d=identicon&r=PG');
background-repeat:no-repeat;
background-position:center;
border:1px solid RGBa(255, 255, 255, 0.1);
background-color:RGBa(127, 127, 127, 0.1);
color:#CFCFCF;
width:10em;
height:10em;
margin-left: 3.9375em;
margin-right: 4em;
text-align:center;
display: block;
}
#title-image:hover
{
border:1px solid RGBa(255, 255, 255, 0.15);
background-color:RGBa(127, 127, 127, 0.15);
color:#FFFFFF;
}
#description
{
width: 18em;
border:1px solid RGBa(255, 255, 255, 0.03);
background-color:RGBa(127, 127, 127, 0.03);
text-align:center;
display: block;
}
</style>
</head>
<body>
<div id="container">
<a href="google.com" id="title-image">This is your Title?</a>
<p id="description">Your description<br>Can go here.</p>
</div>
</body>
</html>
