Contain and center content inside of container with known size

Question

We have a container with known size.

Inside, we have content with unknown height.

We need to contain that content in the container while centered horizontally and vertically.

The content consists of blocks: label, image, label:

enter image description here

I managed to accomplish this for content shorter than the container, however no luck in the other case. Example: http://jsbin.com/banava/4/edit?html,css,output

Does the image need to fit inside the box horizontally? – Salman A Nov 10 '14 at 13:53 — Salman A, Nov 10 '14 at 13:53

Leggy · Accepted Answer · 2014-11-10T13:59:01.570

1

#content-wrapper {
    text-align: center;
    height: 200px;
    width: 200px;
    display: table;
}

#img-wrapper {
    width: 100%;    
    height: 100%;
    vertical-align: middle;   
    display: table-cell;
}

#img-wrapper label {
    display: block;  
    height: 25px;
    line-height: 25px;
}

#img-wrapper img { 
    max-height: 150px;
}

http://jsfiddle.net/L38jg9sr/15/

edited Nov 10 '14 at 13:59

answered Nov 10 '14 at 13:16

Leggy

682
7
20

I stated in the question that label, image and label are all blocks (that means vertically ordered) and are all children of content. – Daniel Birowsky Popeski Nov 10 '14 at 13:23
I added an image to your fiddle: http://jsfiddle.net/L38jg9sr/4/ notice how the content stretches the container instead of containing in it – Daniel Birowsky Popeski Nov 10 '14 at 13:37
Do you want the image to be a fixed height? Does the image need to keep the aspect ratio? – Leggy Nov 10 '14 at 13:39
Must keep aspect ratio. The content as a whole should behave like background-size: contain; – Daniel Birowsky Popeski Nov 10 '14 at 13:42
all they have is font size and padding – Daniel Birowsky Popeski Nov 10 '14 at 13:45
but if you have an idea with fixed height on the labels, do share – Daniel Birowsky Popeski Nov 10 '14 at 13:49
If the labels are a fixed height. E.g. in the example (25px), you could make the image a maximum height (150px in the example). I updated the answer for you. – Leggy Nov 10 '14 at 13:54
1

I think this is the closest we will get. Thanx! – Daniel Birowsky Popeski Nov 10 '14 at 14:10
1

The problem is with the table-cell. It automatically resizes because of CSS 2.1 rules, the height of a table cell is “the minimum height required by the content”. A proper solution would have to NOT include table-cell however I am unsure of how to do it without sorry. Link: http://stackoverflow.com/questions/13667941/how-to-set-maximum-height-for-table-cell – Leggy Nov 10 '14 at 14:13
Would putting the image in a div work because within the div the image can be centered in both directions by using center tags and or setting height and width to 50% with position relative. – CMS_95 Nov 10 '14 at 16:13

Contain and center content inside of container with known size

1 Answers1