CODEWITHSUNDEEP
htmlcss
AGuyCalledGerald
AGuyCalledGerald

Reputation: 8150

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). 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).

Upvotes: 9

Views: 81836

Answers (8)

Richard Yanes Rapado
Richard Yanes Rapado

Reputation: 1

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;
}

Upvotes: 0

sjcoder
sjcoder

Reputation: 181

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%;
}

Upvotes: 9

Dan Nick
Dan Nick

Reputation: 426

With Bootstrap 3 you can add an img-responsive center-block class to center an image

<img class="img-responsive center-block" src="my_image.png" />

Upvotes: 1

ThomasAFink
ThomasAFink

Reputation: 1377

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;
}

Upvotes: 1

allnodcoms
allnodcoms

Reputation: 1262

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

Upvotes: 2

S.Visser
S.Visser

Reputation: 4725

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;        
    }

Upvotes: 16

Jeremy Trifilo
Jeremy Trifilo

Reputation: 470

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>

Upvotes: 0

user92254225
user92254225

Reputation: 149

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;

Upvotes: 0

Related Questions