일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- 워드프레스
- 이렇게살아야되나자괴감이
- i18n
- 지뢰찾기
- Kotlin
- cache-control
- Spring
- LastModified
- brotli
- HTTP
- jsr380
- 랜선아미안해
- 지수반등
- 코드스피츠
- 알게뭐냐
- 스프링
- 알고리즘
- 리얼월드HTTP
- kotliln
- 개미수열
- cross parameter
- 브로틀리
- etag
- 클래스레벨밸리데이션
- jsr303
- Today
- Total
취미개발 블로그와 마음수양
이미지 가운데에 넣기~ vertical image 본문
출처 : 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:
When you have two
inline-block
elements near each other, you can align each to other's side, so withvertical-align: middle
you'll get something like this:When you have a block with fixed height (in
px
,em
or other absolute unit), you can set the height of inner blocks in%
.- So, adding one
inline-block
withheight: 100%
in a block with fixed height would align anotherinline-block
element in it (<img/>
in your case) vertically near it.
'FrontEnd > HTML5 _CSS' 카테고리의 다른 글
그래프 표현해보기 (0) | 2014.06.30 |
---|---|
구글 웹폰트 깨지는 현상 고치기 (0) | 2014.06.30 |
테이블 Td 감싸기..싸이즈 딱 맞게. (0) | 2014.06.11 |
show(), display (css) 차이. ㅋ (0) | 2014.06.04 |
픽셀과 퍼센트로 조종하기. (0) | 2014.06.03 |