방법 중간

Question

http://jsfiddle.net/PZ5AZ/

무엇 이러한 문제가없는 내가 무엇을 할 수 미래에서 왔다고 텍스트가 .also 수직 정렬 중간 보내기 알려 주시기 바랍니다 만들기 위해 할 내게 알려주십시오 텍스트의 수직 정렬을 만드는 방법?

Answer 1

이

#container{ 
position:relative; 
width:200px; 
height:300px; 
border:1px solid #CCCCCC; 
} 
#txt{ 
position:absolute; 
width:150px; 
height:50px; 
top:50%; left:50%; 
margin-top:-25px; /* 1/2 of height */ 
margin-left:-75px;/* 1/2 of width */ 
border:1px solid #FF0000; 
} 

<div id="container"> 
    <div id="txt">My Text</div> 
</div> 

Answer 2

사용해보기 : 패딩 : 0px 0px 4px 0px;

Answer 3

모질라에 기본 버튼 패딩을 지우려면이 추가 : 당신은 부모 요소의 패딩 재생

: 두 가지 옵션이 있습니다, 그래서

button::-moz-focus-inner { 
    border:0; 
    padding-top:0; 
} 

Answer 4

당신은 수직 테이블 이외의 텍스트를 정렬 할 수 v 정렬 텍스트의 환영을 얻으 려합니다. 미스터 롱이 설명했다.

또는

부모 요소 위치를 상대적으로 지정합니다. 및 자식 요소 절대 :

<div id='container'> 
<div id='txt'>My Text</div> 
</div> 

#container{ 
position:relative; 
} 

#txt{ 
position:absolute; left:0px; top:50%; 
margin-top:10px; /* half the height of the text element */ 
} 

/* hint: for scaling attributes use %'s */ 

첫 번째 옵션은 귀하의 경우에 가장 간단하다고 생각합니다.

행운을 빌어 요 Bro!

W.

Answer 5

수직 정렬이 정말 테이블 셀 아니라고 아무것도 지원되지 않습니다 말했다 이전에 한 바와 같이.

그러나 한 줄의 텍스트를 가운데에 놓으려는 경우 line-height을 사용할 수 있습니다. line-height을 요소의 height과 동일하게 설정하고 패딩을 제거하면 수직으로 정렬 된 것처럼 텍스트가 요소의 가운데에 표시됩니다. (먼저 기본 스타일을 제거하는 경우)

그래서 예에서 다음은 작동합니다 : 텍스트가 하나 개 이상의 라인에 랩하는 경우

line-height:28px; 
height:28px; 
padding:0px; 

그러나

이 솔루션이 작동하지 않습니다, 텍스트 갑자기 것 매우 간격이있다.

더 일반적인 해결책을 얻으려면 javascript를 사용하여 특정 요소에 필요한 패딩을 동적으로 처리하는 것이 가장 좋습니다. 당신이 수직 아마도 수평 사업부 내부의 텍스트 중심을 좋아하는 경우에