[CSS] Image vertical align with CSS, avoid absmiddle 효과

이미지 높이 중앙 정렬

align="absmiddle"를 CSS로 변경 방법 style="vertical-align:middle"

핵심 내용

img { vertical-align: middle }

Ever got stuck with the annoying problem of aligning an image next to some text? We all did. There were times when align="absmiddle" would solve this immediately, but how would you accomplish this with CSS?

Ever got stuck with the annoying problem of aligning an image next to some text? We all did. There were times when align="absmiddle" would solve this immediately, but how would you accomplish this with CSS? The truth of the matter is that absmiddle is a proprietary attribute that is not supported in any HTML version. The simple solution for this problem is using the 'vertical-align' css property:

Test 1:
<style type="text/css">
    div img { vertical-align: middle }
</style>

Furthermore, if you notice careful at the results of vertical-align (or even the proprietary absmiddle), often the alignment is not perfectly in the middle, but slightly closer to the top. You can add a small bottom margin to make it perfectly centered to the middle:

Test 2:
<style type="text/css">
    div img { vertical-align: middle; margin-bottom: .25em }
</style>

Notice that in all tests, behaviour will depend on the containing block style, for example, if the containing div is float to left, or display block.
Here are the results for the three tests I wrote, notice how the vertical-align and absmiddle are identical, while not perfectly in the middle. The second test, uses the margin-bottom: .25em to nudge the text straight to the middle.

출처: http://www.web-sheeps.com/rec/69-Image-vertical-align-with-CSS,-avoid-abs