固定大小的容器元素中的中心图像（CSS、HTML）
[英]Center image in container element with fixed size (CSS, HTML)
问题描述
I want to display images on a .net page which I load from database (the amount can thus vary).
我想在从数据库加载的 .net 页面上显示图像（因此数量可能会有所不同）。 All images have different widths and heights up to 130px and 60px respectively.所有图像都有不同的宽度和高度，分别高达 130 像素和 60 像素。 I want to put the images into container elements with a fixed width of 130px and a fixed height of 60px.我想将图像放入固定宽度为 130 像素和固定高度为 60 像素的容器元素中。 The images should be centered vertically and horizontally.图像应垂直和水平居中。 The container elements should be aligned horizontally if possible.如果可能，容器元素应水平对齐。
I tried div (with float) and span .我试过div (with float) 和span 。 With div, I get the fixed sizes, but cannot center the images.使用 div，我获得固定尺寸，但无法将图像居中。 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).如果我将 span 放入 div，它似乎表现得像 div（忽略居中）。
8 个解决方案
解决方案1
16 已采纳 2012-03-28 17:14:22
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;
}
解决方案2
8 2017-09-06 01:28:50
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%;
}
解决方案3
2 2014-11-16 16:36:09
Thinking a little outside of the box (excuse the deliberate pun!) you could use background-size on your container's CSS rule, and background-image: url(this_image.jpg);跳出框框思考（原谅故意的双关语！）您可以在容器的 CSS 规则中使用background-size和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.这将在一个更小更整洁的包中为您处理所有缩放。
Setting background-size: cover;设置background-size: cover; would scale the image so that the smallest dimension matched (though there may be some cropping), and background-size: contain;将缩放图像以便最小尺寸匹配（尽管可能会有一些裁剪），并且background-size: contain; would ensure the entire image fitted.将确保整个图像适合。
It's another option...这是另一种选择...
Danny丹尼
解决方案4
1 2016-03-24 08:25:22
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;
}
解决方案5
1 2016-07-29 15:21:29
使用 Bootstrap 3，您可以添加一个 img-responsive center-block 类来使图像居中
<img class="img-responsive center-block" src="my_image.png" />
解决方案6
0 2013-04-28 16:01:56
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.您也可以将 CSS 代码放在单独的样式表中。 I thought I'd keep them together for the post.我想我会把他们放在一起来发帖。
<!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>
解决方案7
0 2021-02-10 12:47:55
Mr Lister: IMHO for vertical you have to add display: table;李斯特先生：恕我直言，对于垂直，您必须添加display: table; to d parent & specific height, for example:到 d 父母 & 特定高度，例如：
.parent {
display: table;
height: 100vh;
position: fixed;
}
.parent .child {
display: table-cell;
vertical-align: middle;
}
解决方案8
0 2012-03-28 17:00:09
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;垂直对齐：中间；
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.