수직 가운데 정렬 텍스트

좋아, 여기이 HTML 요소가 지금의 모습이다 : 나는 텍스트가 이미지와 함께 중앙에하고 싶은수직 가운데 정렬 텍스트

enter image description here

. 이미지는 32x32 픽셀입니다.

<style> 
div.interface { 
    line-height: 32px; 
    float: left; 
    margin: 10px; 
    width: 450px; 
    font: 14px/27px 'CalibriRegular', Arial, sans-serif; 
    color: #646464; text-shadow: 1px 1px 1px #fff; 
    padding-right: 10px; 
} 
</style> 

<div class="interface"><img src="assets/icons/interface.png" />Filled with fun animations and eye-candy! Complete with Retina graphics.</div>

출처

2011-02-10 sudo rm -rf

확인이 질문 아웃 : HTTP : //stackoverflow.com/questions/4414034/how-to-vertically-align-elements-in-html/4414069#4414069 – JCOC611

@JCOC : 내가 필요로하는 것처럼 보입니다. 미안 나는 충분히 검색하지 않았다. 대답을 받아 들일 수 있도록 여기에 답안을 복제 할 수도 있습니다. :) –

아니, 괜찮아! 내 답변을 붙여 넣은 사본을 작성하고 좀 더 상황에 맞게 편집했습니다! – JCOC611

예를 들어, 텍스트가 수직 높이와 동일하게 라인 높이를 설정 센터

#text{ line-height: 30px; vertical-align:middle; }

출처

2011-02-10 03:10:00 JCOC611

감사합니다. JCOC의 대답을 먼저 받아 들일 것입니다. 가능한 한 빨리 제공됩니다. 감사! –

은'vertical-align : middle; '이어야합니다. – stephenmurdoch

이게 뭐죠? jk 나는 그것을 편집했다. – JCOC611

이 <img /> 태그에 style="vertical-align: middle"를 추가

여기 내 코드입니다.

vertical-align 태그에 대한 전체 설명은 http://phrogz.net/CSS/vertical-align/index.html을 참조하십시오.

img{ height: 30px; } 
#text{ line-height: 30px; }

을 그리고 중간에 수직 정렬을 설정합니다 :

출처

2011-02-10 03:07:54 LucasTizma

답변 해 주셔서 감사합니다! :) –

이것은 가장 좋은 대답입니다. –

수직 가운데 정렬 텍스트

답변

관련 문제