display : 이전 브라우저의 표 속성

동적 텍스트를 세로로 정렬하려면 span 태그를 display: table-cell 속성으로 사용하십시오. 그것은 으로 display: table 속성으로 감싸졌으며 꼭해야하는 것처럼 작동합니다.display : 이전 브라우저의 표 속성

하지만 문제는 이전 버전의 Firefox에서는 작동하지 않습니다. 불행히도, 나는 firefox 7 이상에 대한 지원이 필요합니다.

실제 HTML 테이블을 사용하는 것보다 간단한 솔루션이 있습니까?

출처

2013-03-06 swolfish

"세로 정렬"을 설명 하시겠습니까? – Liam

@ Liam [MDN 참고] (https://developer.mozilla.org/en-US/docs/CSS/vertical-align)를 확인하십시오. – Barney

@ 바니 (Barney) 나는 제임스의 접근 방식을 아래에서 더 생각했다. 그가 시도하고있는 것을 할 수있는 더 좋은 방법이 있을지 모르지만 그가 무엇을하려고하는지 모르기 때문에 나는 모른다. ..... 테이블이 아니라면 테이블 레이아웃을 사용하지 말아야한다! – Liam

display 속성에 대한 MDN 참조에 따르면, 을 통해 table 표시. 너 괜찮을거야!

출처

2013-03-06 08:57:40 Barney

더 큰 문제는 IE에 따르면! – Liam

@Liam 사실이지만 OP의 질문은 Firefox에 관한 것입니다. – Barney

나는 대답하지 않았다. 당신 말이 맞습니다. 문제는 Firefox 버전 9 이상이 직접/첫 번째 자식을 제외하고이 속성을 적용하지 않는다는 것입니다. – swolfish

display:table-cell은 수직 정렬의 전부는 아니며 모두 끝나지는 않습니다. 수직 정렬은 CSS만으로도 쉽게 달성 할 수 있습니다.

특정 높이로 포함하는 분배기 (유체 또는 정적, 그것은 중요하지 않습니다) :

당신은 세 가지가 필요합니다.
높이가 50 % 인 상대적으로 "패딩"분할기.
세로로 정렬하려는 내용의 컨테이너입니다.

콘텐츠 컨테이너의 정확한 높이를 알아야합니다.

div#container { 
    height:500px; 
} 

div#paddingDivider { 
    height:50%; 
} 

div#contentContainer { 
    margin:0 auto; /* Centrally align the element */ 
    height:100px; /* Declare the exact height of the element */ 
    margin-top:-50px; /* Position half of the element inside the padding divider */ 
}

JSFiddle example.

출처

2013-03-06 08:58:17

텍스트가 항상 동일한 높이이지만 몇 줄로 더 긴 텍스트가 쪼갤 때 제대로 작동합니다. 수직적으로 부모 컨테이너의 중앙에 위치. – swolfish

그래서 컨테이너의 정확한 높이를 알아야한다고 언급했습니다. 텍스트가 변경되지 않으면'line-height'를 지정하십시오. 총 높이는'줄 높이 * 줄 수'입니다. 텍스트가 변경 될 가능성이있는 경우 JavaScript를 사용하여 내용 컨테이너의 '외부 높이'를 계산하고 'margin-top'속성을 해당 값의 절반으로 설정해야합니다. –

display : 이전 브라우저의 표 속성

답변

관련 문제