vertical alignment for children div tag

Question

Possible Duplicate:
vertical alignment of elements in a div

I have div tag, in him i have img tag, div tags sizes is static: 200x200, img sizes is always less than 200px, but how exactly, I dont know beforehand. I want img will be alwasy center of the div tag, in horizontal I make, but how to make this as vertikal ?

   <div style="width: 200px; height: 200px; background-color: #090; text-align: center; ">
        <img src="pic.jpg">
    </div>

Please see the related questions to the bottom right of this page. — Madara's Ghost, Aug 10 '12 at 15:12
Please tell me, how to make vetikal alignment when beforehand I dont know children element height? In general this is possible ? — ოთო შავაძე, Aug 10 '12 at 15:32
Check out the duplicate question he linked to, or just look at this: http://phrogz.net/CSS/vertical-align/index.html — Chris Baker, Aug 10 '12 at 15:33

amiregelz · Answer 1 · 2012-08-10T15:50:09.720

3

Look at this JSFIDDLE

You can use the CSS calc() function to vertically center an image inside the div:

position: relative;
top: -webkit-calc(50% - []px )    /* [] = half the image height) */;  
top: calc(50% - []px)    /* [] = half the image height) */;

edited Aug 10 '12 at 15:50

answered Aug 10 '12 at 15:15

amiregelz

1,718
7
20
36

Thanks but, you tests this metod? this works incorrectly – ოთო შავაძე Aug 10 '12 at 15:27
I want set children element in center for parent element as vertikal. In your code, children element top border is in center and not self children element. is not it? – ოთო შავაძე Aug 10 '12 at 15:38
I edited my answer to show you how you can fix it so it will be exactly in the center. You could do it manually if you'd use `px` instead of `%` and you know you image height, but this way it's even easier. – amiregelz Aug 10 '12 at 15:52

vertical alignment for children div tag

1 Answers1