관리 메뉴

취미개발 블로그와 마음수양

이미지 가운데에 넣기~ vertical image 본문

FrontEnd/HTML5 _CSS

이미지 가운데에 넣기~ vertical image

아라한사 2014. 6. 25. 15:01

출처 : http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div


=======================

css

/*background: url('../images/question.png') no-repeat center center transparent;*/


=======================

The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on both elements.

So there is a solution: http://jsfiddle.net/kizu/4RPFa/74/

Or, if you don't want to have an extra element in modern browsers and don't mind using IE expressions, you can use a pseudo-element and add it to IE using a convenient Expression, that runs only once per element, so there won't be any perfomance issues:

The solution with :before and expression() for IE: http://jsfiddle.net/kizu/4RPFa/76/


How it works:

  1. When you have two inline-block elements near each other, you can align each to other's side, so with vertical-align: middle you'll get something like this:

    Two aligned blocks

  2. When you have a block with fixed height (in pxem or other absolute unit), you can set the height of inner blocks in %.

  3. So, adding one inline-block with height: 100% in a block with fixed height would align another inline-block element in it (<img/> in your case) vertically near it.