Center image in container element with fixed size (CSS, HTML)
Question
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).
8 answers
solution1
16 ACCPTED 2012-03-28 17:14:22
You can see it work on 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;
}
solution2
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
.image-container img {
max-height: 100%;
max-width: 100%;
}
solution3
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); 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; 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.
It's another option...
Danny
solution4
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;
}
solution5
1 2016-07-29 15:21:29
使用 Bootstrap 3，您可以添加一个 img-responsive center-block 类来使图像居中
<img class="img-responsive center-block" src="my_image.png" />
solution6
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.
You can put the CSS code in a separate style sheet as well. 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>
solution7
0 2021-02-10 12:47:55
Mr Lister: IMHO for vertical you have to add display: table; to d parent & specific height, for example:
.parent {
display: table;
height: 100vh;
position: fixed;
}
.parent .child {
display: table-cell;
vertical-align: middle;
}
solution8
0 2012-03-28 17:00:09
if you have an IMG tag inside the divs, use margin: 0px auto on the div css;
For vertical:
display: table-cell; vertical-align: middle;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.