는 가로 DIV와 텍스트를 정렬

Question

수평 요소를 정렬 CSS (div의)를 사용하는 방법에 대한 질문에 유래에 대한 몇 가지 질문이 있습니다

. 일반적으로 float 또는 display: inline-block을 사용하여 수행합니다.

그러나, 나는 매우 간단한 요구 사항을 가지고 있고, 나는 그것이 완벽하게 작동하도록하기 위해 이러한 기술 중 하나를 사용하는 데 문제가 있어요. DIV 요소를 사용하여 텍스트 줄을 가로 방향으로 정렬하기 만하면됩니다.

그래서, 기본적으로,이 일의 3 가지 방법이 있습니다 :

방법 1 (display: inline-block 사용)

<div style = "display: inline-block;">Foo</div> 
<div style = "display: inline-block; padding-left: 19px"> 
    <div style = "border: 1px solid #000000; height: 1em; width: 100px"></div> 
</div> 

방법 2 (float 사용)이

<div style = "width: 150px"> 
    <div style = "float:left">Foo</div> 
    <div style = "float:right"> 
     <div style = "border: 1px solid #000000; height: 1em; width: 100px"></div> 
    </div> 
</div> 

방법 3 사용 .. (나를 죽이지 마세요)을 <table> :

<table style = "width: 150px" cellpadding = "0" cellspacing = "0" border = "0"> 
    <tr> 
     <td style = "width: 40px"> 
      Foo 
     </td> 
     <td> 
      <div style = "border: 1px solid #000000; height: 1em; width: 100px"></div> 
     </td> 
    </tr> 
</table> 

이 세 가지 방법

파이어 폭스에서 다음과 같이 렌더링 방법 1 (와

좋아, 그럼 먼저 문제 inline-block)는 텍스트가 DIV 요소와 수직 정렬 (가운데 정렬)되지 않아 어색하게 보입니다. 대신, DIV의 아래쪽 테두리는 텍스트의 아래쪽에 맞춰집니다. 이 문제를 해결하기 위해 패딩과 여백 조정을 시도했지만 도움이되지 않았습니다.

방법 2 (float들) 좋아 보인다,하지만 방법 2의 문제는 더 이상 뭔가 경우 텍스트 변경 무슨 일입니까? 음 ...

그래서 수레를 사용의 문제는 텍스트가 길어집니다 경우 DIV 요소가 다음 행으로 무너 뜨렸다 점이다. 그래서 이것은 받아 들일 수 없다. 방법 1 ( inline-block)에는이 문제가 없습니다.

모든 요구 사항을 충족하는 유일한 방법은 <table>을 사용하는 방법이지만 사용하지 않으려면 ... 음, reasons입니다.

그래서, 여기에 가장 좋은 방법은 무엇인가. <table>을 사용하는 방법 3과 동일한 결과를 얻기 위해 CSS와 함께 DIV를 어떻게 사용할 수 있습니까? 방법 1 DIV 함유 텍스트 line-height:1em; vertical-align:top; 추가

Answer 1

는 (라인 높이가 경계 DIV의 높이 임)이 문제를 해결하는 것으로 보인다.

이전 버전의 IE에서는 예측할 수 없기 때문에 inline-block ~ float을 선호합니다. float 이것이 실제로 설계된대로 float이 다음 행으로 넘쳐 흐르지 않게하는 것도 어렵습니다.