5

I'm trying to center an image on a site. As I want it to be centered both horizontally and vertically I used a table/table-cell layout as following:

<div id="mainContainer>
    <div id="horizon">
        <img src="url">
    </div>
</div>

Here mainContainer ist set to display: table and horizon is set to display: table-cell.

Unfortunately the image is no longer resizing proportionally as it becomes part of this structure. As soon as I move it into the table/table-cell divs it resizes to its original size (instead of being resized proportionally because of max-width: 100% and max-height: 100%)

see: http://jsfiddle.net/U8KcN/

EDIT:

My bad. I just tried to simplify the issue. I want to build a little slideshow for images. The problem here is that I do not know which sizes the images are (referring to someone else using the slideshow). So in simple terms I need a specific CSS that 1) centers the image vertically and horizontally in the div if its width and height are smaller than the div's dimensions, 2) resizes the image automatically if it is bigger than the div's dimensions (unnecessary to add, it is unknown whether it's width or height is bigger).

source: OP Comment

Improve this question

4 Answers 4

Reset to default
7

Every time I hear someone talk about the evils of using tables and then see them create a complete table structure out of DIVs with pretty much the same amount of markup -- sometimes more -- it really gets on my nerves.

By the way, have you ever developed a site for someone who wanted to do some of their own layouts in the content area using a CMS like Wordpress? The only way someone with almost no HTML knowledge can do that well is by allowing them to use table tools in Tiny MCE or another editor. So yes, tables are still important.

Recently, I had to do just that for a customer, but the images in the table cells were not responding and shrinking for smaller screen sizes. All I had to add to my CSS to care of that problem was:

table {

   table-layout: fixed; 

}

Now the images in the table cells are growing and shrinking accordingly, and the horizontal scrollbar is no longer appearing. Oh, of course you have to use percentages in your table width and td widths as well.

Improve this answer
1
  • Also, outlook compatible e-mails require a responsive table layout.
    – user734063
    Commented Dec 4, 2014 at 19:06
3

How about dropping that "CSS-table" stuff and doing it a bit easier? 

<div style="width:auto;height:auto;margin:25%;text-align:center;vertical-align:middle">
     <img src="URL">
</div>

At least, that’s how I would handle it...

EDIT:

Please note that I've put the CSS inline to show you what element should get what style. In production, you should — as a comment to this answer correctly stated — always separate style from code like. So, practically, you'll end up with something like this:

<style>
.centerimg {
    width:auto;
    height:auto;
    margin:25%;
    text-align:center;
    vertical-align:middle
}
</style>

...

<div class="centerimg">
    <img src="#">
</div>

EDIT 2:

Replying to the related comment, here's the update to make the image fit it's parent proportionally:

If your image has a bigger width than height...

<style>
...
img{
   max-width:100%;
   height:auto
}
</style>

or, if your image has a smaller width than height...

<style>
...
img{
   max-height:100%;
   width:auto
}
</style>

EDIT 3:

Looking at your fiddle, I came up with this which works like you want it to work:

<style>
*{
width:100%;
height:100%;
margin:0;
text-align:center;
vertical-align:middle
}

img{
width:auto;
height:100%;
}
</style>

I've forked your fiddle to show the updates: http://jsfiddle.net/LPrkb/1/

EDIT 3:

As the OP doesn't seem to be able to decide what he needs, I'm adding this final edit due to his latest comment.

You could also use a CSS background-image with "background-size:contain" on the "mainContainer" and be done with it... check http://jsfiddle.net/HGpfJ/2/ or look at this 100% working example taking a completely different approach which results in just the same effect/functionality:

<!DOCTYPE HTML>
<html itemscope="itemscope" itemtype="http://schema.org/WebPage">
<head>
<title>Example</title>
<style>
html,body{width:100%;height:100%;margin:0;padding:0}
#centerimg{
width:100%;
height:100%;
background:transparent url(http://oi42.tinypic.com/v9g8i.jpg) no-repeat scroll center;
background-size:contain;
}
</style>
<body>
<div id="centerimg"></div>
</body>
</html>

Let's face the facts: depending on where in the document structure you want to have the image "centered", there are more than a dozen of ways to do it.

If OP needs specific code, we will need the complete document structure from OP and not simply a "generalized" code-snippet which could be anywhere in whatever document structure.

Improve this answer
14
  • 1
    With the addendum that the CSS shouldn't be inline.
    – Ryan Kinal
    Commented Jun 27, 2013 at 14:30
  • @RyanKinal That's logic... and we completely think the same when it comes to that! The only reason I coded the CSS inline is to make it obvious what element should get what style, instead of using multiple paragraphs to explain it. ;)
    – e-sushi
    Commented Jun 27, 2013 at 14:32
  • @RyanKinal Added an "edit" to the answer to implement your correct addendum. Thanks for the heads-up to make my reply a bit more complete.
    – e-sushi
    Commented Jun 27, 2013 at 14:38
  • Your suggestion is not quite what I wanted. I'm looking for a no-scroll (overflow: hidden) solution where the image is resized (proportionally) to fit its parent div. ( Your solution looks like jsfiddle.net/TD7RU )
    – Stefan Surkamp
    Commented Jun 27, 2013 at 14:48
  • 1
    And the addendum that vertical-align: center doesn't exist.
    – Alex W
    Commented Jun 27, 2013 at 15:03
2

Using tables (display: table-cell) for layout is a web development anti-pattern these days. Try using the <span> element with display: inline-block to vertically and horizontally center the image, as this method will work all the way back to IE 6. Also, you can change the image size to be a percentage if you want it to resize according to its container:

http://jsfiddle.net/hHWy8/1/

HTML:

<span class="horizontal">
    <span class="vertical">
        <img src="url" />
    </span>
</span>

CSS:

span {
    display: inline-block;
}
span.horizontal {
    text-align: center;
    width: 100%;
}
span.vertical {
    vertical-align: middle;
    border: 1px solid black; /* put a border on container for display purposes */
    line-height: 1000px;     /* this sets the vertical height */
    overflow: hidden;
    white-space: nowrap;
}
span.vertical img {
    height: 50px; /* set your image height (could be percent) */
    width: 50px;  /* set your image width (could be percent) */
}
span.vertical br {
    display: none;
}
Improve this answer
3
  • To me it seems the image is just shrinked to the specified values. But I want it to resize proportionally (if it is bigger than its container). Elsewise I want it to be centered in the parent container.
    – Stefan Surkamp
    Commented Jun 29, 2013 at 16:26
  • @ШтефанСуркамп If you want it to resize proportionally you can use percentages (%) instead of pixels (px).
    – Alex W
    Commented Jul 1, 2013 at 20:36
  • As mentioned above, I do not know in advance if the image fits the container, if it is bigger in width, in height, or in both.
    – Stefan Surkamp
    Commented Jul 2, 2013 at 16:40
1

To resize your image you could use this css:

    html,body,div,img{
        height:100%;
    }

    img { width:100%}

It sets the html and body's height to 100%, this is needed so the height of your page takes all available space

Improve this answer
1
  • Unfortunately I do not know whether the image's dimensions are smaller or bigger than the div's one. See my response to @e-sushi's answer above.
    – Stefan Surkamp
    Commented Jun 29, 2013 at 16:23

Not the answer you're looking for? Browse other questions tagged or ask your own question.