CSS 다른 행의 텍스트를 대조하십시오.

현재 내 사이트의 페이지에 대해 탭 레이아웃으로 작업 중이며 일부 텍스트가 한 줄에 걸쳐 있고 일부 텍스트가 두 줄에 걸쳐 있기 때문에 다른 탭에서 텍스트를 세로로 정렬하는 데 문제가 있습니다. 각 탭의 중간에 텍스트를 배치하고 텍스트를 첫 번째 줄에 맞춰 정렬하지 않아야합니다.CSS 다른 행의 텍스트를 대조하십시오.

지금까지 Valign과 Line-height를 시도했지만별로 도움이되지 않습니다. 아마 작동하지 않도록

text-align: center; 
vertical-align: middle;

valign 당신의 "탭"

출처

2012-08-10 user1590687

도움이 필요한 코드를 게시하십시오. 그렇지 않으면 제안을 시도해보고 시도해보십시오. 이 코드를 사용하면 확실한 답을 얻을 수 있습니다. – j08691

당신은 vertical-align: middle를 사용하지만, 당신이를 사용할 필요가에 대한 순서로 적용 할 수 있음을 깨달아야한다. 이 HTML 구조와 유사한 구조를 사용하는 경우

예를 들어, :

<div class="container"> 
    <span>Some Text</span> 
</div>

는 그런 다음 원하는 중심으로 사용하여 얻을 수 :

여기

.container { 
    text-align: center; 
    display:table-cell; 
    vertical-align:middle 
}

가 JSFiddle 예입니다. 이것에 대한

출처

2012-08-10 15:52:47

텍스트 사용, 수직 및 수평으로 모두를 중심으로 라인 높이 예) 라인 - 높이 : 20 픽셀

출처

2012-08-10 15:46:53 Samuel

왜 세로 왜곡이 텍스트에 아무런 영향을주지 않는 이유는 모르겠다. 높이 : 32px; 텍스트 정렬 : 가운데; font-weight : bold; font-family : arial, sans-serif; 글꼴 크기 : 14px; \t \t \t 최소 높이 : 2em; 패딩 - 윗면 : 12px; 이것은 내가 지금까지 가지고있는 것입니다. – user1590687

@ user1590687 HTML과 CSS를 게시하면 문제가 있습니다. 텍스트를 가운데에 맞출 때 더 도움이 될 수 있습니다. – Samuel

사용에 td 요소에 대한 HTML 속성입니다 : 당신이 필요로하는 경우

출처

2012-08-10 15:51:57 extremeFE

그러면 텍스트가 가운데에 표시되지만, 줄 사람 – Samuel

정말 도움이 읽기 understanding vertical align입니다.

각 탭 선택기의 레이블에 대해 이야기하고 있다고 가정합니다. 해당 페이지의 트릭 중 하나를 사용하고 내부 텍스트 상자에 탭 텍스트를 배치 할 수 있습니다.

내 머리 꼭대기에서 시도해 보셨습니까?
line-height:100%;? 줄의 높이를 부모의 높이로 설정하거나 화면을 채울 수 있습니다. 확실하지 않다.

출처

2012-08-10 15:56:54 user1590709

CSS 다른 행의 텍스트를 대조하십시오.

답변

관련 문제