html - Margins got bugged (elements are buggy) when image inside div is centered horizontally and vertically -
I have 2 pictures below each other, I want them to be horizontally and vertically centered in parent div Go. The problem is that the second element will not fit in the parent div.
This is what I need:
And now I have it:
Here is the code I am using:
HTML:
& lt; Div id = "slika" & gt; & Lt; Img src = "images / elementi / EXTRA_SNIZENO.png" width = "auto" height = "15" alt = "EXTRA" & gt; & Lt; Br> & Lt; Div class = "img-wrapper" & gt; & Lt; Img src = "r / images / ideafissa_1.png" width = "auto" height = "auto" alt = "papirnatirucnik.jpg" & gt; & Lt; / Div & gt; & Lt; / Div & gt; css
#slika {border: solid 2px; Display: Table; Swim left; Height: 126px; Width: 111px; Text align: center; Vertical-row: middle; } .img-wrapper {display: table-cell; Vertical-row: middle; } IMG {max-width: 100%; } jsFiddle:
complete; To remove this from the document flow, there is a need to set the container # silka to status: relative to ensure that it has the image instead of the viewport situated at. #slika {status: relative; Border: Solid 2px; Display: Table; Swim left; Height: 126px; Width: 111px; Text align: center; Vertical-row: middle; } .img-wrapper {display: table-cell; Vertical-row: middle; } .topImage {status: absolute; Left: 0; Top: 0; } IMG {max-width: 100%; } & lt; Div id = "slika" & gt; & Lt; Img src = "http://tommyvirtualnikatalog.com.hr/images/elementi/EXTRA_SNIZENO.png" width = "auto" height = "15" alt = "extra" square = "top image" /> & Lt; Br> & Lt; Div class = "img-wrapper" & gt; & Lt; Img src = "http://tommyvirtualnikatalog.com.hr/images/akcija/neprehrana/1796_muska-carapa-ideafissa_1.png" width = "auto" height = "auto" alt = "papirnatirucnik.jpg" /> & Lt; / Div & gt; & Lt; / Div & gt; JS Friedal:
Comments
Post a Comment