텍스트를 세로로 정렬하십시오.

내가 필요한 것은 이미지 상단 정렬과 일치하도록 div의 정확한 맨 위로 텍스트를 밀어 넣는 것입니다.

원하는 이미지와 텍스트가 모두 한 줄에 정확하게 정렬되기를 원합니다. 이제 상단에 완벽하게 정렬되지 않은 텍스트의 상단에 작은 공간을 볼 수 있습니다.

HTML

<div class="wrap"> 
    <div class="image"><img src="" /></div> 
    <div class="content">Lorem ipsum</div> 
</div>

CSS

.wrap{background:grey} 
.image{display:table-cell; vertical-align:top} 
.content{display:table-cell; vertical-align:top; font-size:24px}

http://jsfiddle.net/s38Uv/20/

출처

2013-02-08 Sowmya

부모의 높이를 알고 있습니까? 텍스트가 두 줄로 쪼개 질 것입니까? – thordarson

@thordarson 예. 그래서 선 높이가 좋은 생각이 아닙니다. – Sowmya

선 높이가 좋은 이유가 아닌 이유는 무엇입니까? ** 수정 : ** 죄송합니다, 나는 귀하의 질문을 잘못 읽었습니다. – thordarson

하지 수직에 display:table-cell 상단에 정렬 필요 할 당신 - 즉 기본 동작입니다.

간격이있는 이유는 선 높이가 텍스트 주변의 가상 상자와 정확히 일치하지 않기 때문입니다. 차이는 글꼴 자체에 따라 다릅니다. 탐색기 7 이상에서 작업하는 경우 텍스트를 display:inline-block, margin-top: -0.Xem (X는 임의의 숫자)으로 설정할 수 있습니다. 물론 픽셀로 여백 가기를 설정할 수도 있습니다.

출처

2013-02-08 11:00:30

텍스트를 세로로 정렬하십시오.

답변

관련 문제