html - Vertically Center an image within a Div that has a background image? (Nothing is working) -
i have been stuck on day, please help! know vertical alignment solutions on s.o can't find (and more importantly understand) elegant solution problem.
i designing header/banner personal site , while have managed center img within it's container div it's way small. here code:
<div class="container"> <img src="banner/soda8.png"/> </div> .container{ margin-top:50px; height:200px; min-height:200px; background-image:url(hex/hex4.jpg); background-position: center; background-repeat:repeat; background-size:cover; line-height:300px; } .container img{ margin-left:auto; margin-right:auto; vertical-align:middle; max-width:100%; max-height:100%; display:block; }
here result: http://imgur.com/vooetq0
the word 'soda' small, when alter max-width , max-height of img('soda') 100% 200% following:
how size img whilst still keeping centered , have supported browsers?
would appreciate help.
i'm assuming have structure this:
<div class="container"> <img src="soda.png"> </div>
in case, code you've pasted above, if increase max-height 200%, apply negative margin image half height of new size of image.
i've been using absolute positioning negative margins center images, , giving on vertical-align myself. using 50% percentage left , top allow adjust height or width of container (if it's sitting in responsive grid, example), , backing image out half it's width , height in negative margin center it.
.container { position: relative; margin-top:50px; height:200px; min-height:200px; background-image:url(hex/hex4.jpg); background-position: center; background-repeat:repeat; background-size:cover; line-height:300px; } .container img { position: absolute; left: 50%; top: 50%; margin-left: -(half img width/2)px; margin-top: -(half img height/2)px; display: block; }
Comments
Post a Comment