Posted By

adambundy on 07/09/12


Tagged

css


Versions (?)

Who likes this?

37 people have marked this snippet as a favorite

MazheM
cplusplus
madar32
d0ri0
adambundy
doubleudet
liakwee
scilec
tux-world
ajhx
ringo380
genije
Rosk
praveensewak
rickygri
ruijscosta
melaS
A973C
choppingblock
lionminister
o0110o
dedi49
swapnilgg
inaki
lookingforsome
cougarboy21
emilstahl
CSB_Campaigner
kileyohl
ekarakas
imoddesign
kadavre
atulkransingh
octaviannitagmailcom
unibox
philik
Groobox


Center an image vertically and horizontally in a container


 / Published in: CSS
 

URL: http://www.brunildo.org/test/img_center.html

Thanks to Brunildo.org for this: http://www.brunildo.org/test/img_center.html

  1. The markup:
  2.  
  3. <div class="wraptocenter"><span></span><img src="..." alt="..."></div>
  4.  
  5. The CSS:
  6.  
  7. <style type="text/css">
  8. .wraptocenter {
  9. display: table-cell;
  10. text-align: center;
  11. vertical-align: middle;
  12. width: ...;
  13. height: ...;
  14. }
  15. .wraptocenter * {
  16. vertical-align: middle;
  17. }
  18. /*\*//*/
  19. .wraptocenter {
  20.   display: block;
  21. }
  22. .wraptocenter span {
  23.   display: inline-block;
  24.   height: 100%;
  25.   width: 1px;
  26. }
  27. /**/
  28. </style>
  29. <!--[if lt IE 8]><style>
  30. .wraptocenter span {
  31. display: inline-block;
  32. height: 100%;
  33. }
  34. </style><![endif]-->

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: o0110o on October 21, 2012

Interesting. Nice hack.

You need to login to post a comment.