이미지를 세로로 가운데 정렬하는 방법?

이미지가 선 높이보다 작을 때 이미지를 선상에 배치하는 가장 좋은 방법은 무엇입니까? 예를 들어이미지를 세로로 가운데 정렬하는 방법?

(인라인 쉽게 읽을 스타일) :

<div style="line-height: 20px"> 
    <img style="width: 12px; height: 12px;"/> 
    Blah blah blah 
</div>

Here's a jsFiddle example. 또한이 예제는 vertical-align: middle이 작동하지 않는 이유를 보여줍니다.

나는 img가 div의 텍스트에 집중되도록하고 싶습니다. 즉, 텍스트가 여러 줄로 묶여 있더라도 이미지는 한 줄에 맞춰 정렬됩니다. 이상적으로, 솔루션은 이미지의 여백/패딩을 설정하지 않아도 선 높이를 알지 못하더라도 작동합니다.

것들 내가 읽은 :

How do I vertically align text next to an image with CSS? 왜 당신이 이미지로 설정하지

Understanding vertical-align

출처

2010-06-15 Jeremy Kauffman

당신이 말하는 링크에 지정된 솔루션의 문제점은 무엇입니까? ' '을 사용하면 이미지가 라인 높이보다 작을 때도 똑같이 잘 작동합니다. –

여기에 뭔가 빠져 있을지 모르지만, 당신이 가지고있는 것은 수직으로 정렬되어있는 것 같습니다 : http : // jsfiddle.net/JrFkE /' – edl

나는이 두 가지 방법으로 문제점을 보여주는 바이올린을 추가했습니다. –

문제의 원인은 주변 텍스트의 x-height에 비해 이미지의 중심이 수직적입니다. 주변 텍스트의 baseline 및 mean line가 포함되어있는 곳은 확대 된 스크린 샷에 아주 분명하게 볼 수 있습니다

illustration of a vertically aligned image compared to the surrounding text's baseline and mean line

이미지가 유사 관계없이 글꼴 크기 나 줄 간격은 당신이 사용하는 정렬되지 않습니다. 따라서 인쇄상의 의미에서 이미지는 실제로 정확하게 수직으로 정렬됩니다. 이미지의 중심이 평균 라인에 가까운 있도록 정렬을 조정하고 싶은 경우에는 간단하게 위쪽으로 margin-bottom를 사용하여 조금 이동 :

는

img.icon { 
    margin-bottom: 0.25em; 
}

0.25의 값은 그들을 오히려 임의로 선택한다 , 그것을 밖으로 시도했을 때 좋게 보였던 것에 의거했다. 맛에 따라 자유롭게 조절하십시오.

여기에는 글꼴 크기가 다른 a comparison before and after the margin-adjustment입니다.

출처

2010-06-15 20:10:51

+1 항상이 문제 (텍스트가있는 인라인 이미지)에 갇혀있었습니다. 그것은 진정한 해결책입니다. Thanx @Wieslander – shashwat

보충 : img는 수직 정렬 : 하단, mergin-bottom : (행 높이 - 이미지 높이)/2 – linjunhalida

(거래 이미지가 큰 경우에, 여기에 적용하지 않는 것) div 요소의 배경? 예 :

<div style="line-height: 20px; background: url(path/image.gif) 5px 5px; no-repeat; padding-left: 40px;"> 
    Blah blah blah 
</div>

이렇게하면 이미지가 왼쪽 상단에 위치합니다. 적어도 그것이 내가 할 수있는 방법입니다.

출처

2010-06-15 18:53:36

나쁜 생각은 아니지만이 경우 img 태그 대신 이미지가 실제로는 스프라이트 (예 : 와 유사하므로 작동하지 않습니다. –

@jeremy : 그렇다면 왜 당신의 질문에'img' 태그를 사용합니까? – jeroen

간체.이 솔루션은 수동으로 거리를 설정해야하는데, 나는 피하려고합니다. 텍스트 크기 나 줄 높이를 변경하면 이미지 위치를 다시 조정해야합니다. –

시도

감사 부모 컨테이너 display: table 및 display: table-cell를 확인합니다. 그 후에 vertical-align: middle는 "테이블 방식"으로 작동해야합니다.

출처

2010-06-15 19:19:30 vtambourine

IE7 이하에서는 작동하지 않지만 불행히도 여전히 존재합니다. –

이미지를 세로로 가운데 정렬하는 방법?

답변

관련 문제