div 텍스트를 세로로 정렬하는 방법은 무엇입니까?

2 개가 나란히 뜬다.div 텍스트를 세로로 정렬하는 방법은 무엇입니까?

왼쪽의 div는 부품 번호이며 한 줄만 표시됩니다. 오른쪽의 div는 제품 설명이며 여러 줄을 가질 수 있습니다.

오른쪽 div가 2 줄 이상으로 커지면 왼쪽 div 텍스트를 어떻게 세로로 정렬 할 수 있습니까?

다음은 코드입니다. 여기

<td> 
    <div class="prodNumber left partNumSizexSmall"> 
     <a href="link" style="color:blue;text-decoration:underline;"><b>PartNum</b></a> 
    </div> 
    <div class="prodDesc xsmallDesc left"> 
     ProductDescription1 
    </div> 
</td>

는 중심 내용이 display: table-cell

.center_me { 
    height: 200px; 
    vertical-align: middle; 
    display:table-cell; 
}

필요 것 가지고

.left { 
    float: left; 
} 
.prodNumber { 

} 

.prodDesc { 
    padding-left: 8px; 
    padding-right: 8px; 
} 
.partNumSizexSmall { 
    min-width: 50px; 
} 
.xsmallDesc { 
    max-width: 550px; 
}

출처

2014-02-10 Ennio

여기를 참조하십시오 : 은 [여기 링크 설명을 입력합니다] [1] [1] : http://stackoverflow.com/questions/2939914/vertical-align-text-in-a-div – maskeda

여러 줄짜리 텍스트에이 정확한 문제가 있었지만 표 셀을 필요로하지 않는 CSS 솔루션이 필요했습니다. 여기에 대체 솔루션이 있습니다. http://stackoverflow.com/questions/13994549/trouble-vertically-centering-text-in-another-div-with-相対 크기 조정 – cirrus

를 사용하여 테이블

  <td> 
      <table> 
       <tr> 
        <td class="prodNumber left partNumSizexSmall"> 
         <a href="link" style="color: blue; text-decoration: underline;"><b>PartNum</b></a> 
        </td> 
        <td class="prodDesc xsmallDesc left"> 
         ProductDescription1 ProductDescription1 ProductDescription1 ProductDescription1 
         ProductDescription1 ProductDescription1 ProductDescription1 ProductDescription1 
         Product Description1 Product Description1 Product Description1 Product Description1 
        </td> 
       </tr> 
      </table> 
     </td>

출처

2014-02-10 21:04:20 Ehsan

고마워요 ... :) – Ennio

-1

를 사용하여 뭔가를해야만이

<div align="center"> 
This is some text! 
</div>

출처

2014-02-10 19:21:23 SimplePi

Align은 더 이상 사용되지 않는 속성입니다. http://www.w3.org/TR/html4/present/graphics.html#h-15.1.2 – j08691

@ j08691 그래도 작동합니다. – SimplePi

작동하지 않을뿐만 아니라, 뭔가를 중심으로 수직으로 배치하는 것이 구식의 올바른 방법이 아닙니다. http://jsfiddle.net/j08691/q2J9k/ – j08691

DIV 같은 CSS입니다은 요소에 세로로 정렬 된 자식을 가질 수 있으므로 자식을 세로로 정렬 할 수 있도록 부모에 있어야합니다.

여기에 working JSFiddle demo이 있습니다.

출처

2014-02-10 19:26:21

줄 높이를 사용하십시오.

$("document").ready(function(){ 
    var newheight = $(".prodDesc").height(); 
    var newheight2 = $(".prodNumber").height(); 
    if(newheight > newheight2){ 
     $(".prodNumber").css("line-height", newheight); 
    }else if(newheight2 > newheight){ 
     $(".prodDesc").css("line-height", newheight2); 
    } 
});

작동해야하지만 테스트하지 않았습니다. 죄송합니다.

출처

2014-02-10 19:42:59

OP와 정확히 일치하는 멀티 라인 텍스트에는 작동하지 않습니다. – j08691

좋은 점이 편집에서 던졌습니다. 나는 멀티 라인이되기 전에 오른쪽에 대해서만 생각하고있었습니다. 그게 좋을거야. 그렇지 않다면 다른 사람이 대답하도록하십시오. 그 점을 지적 해 주셔서 감사합니다. –

가장 입증 된 솔루션은 메인 컨테이너를 디스플레이로 적용하는 것입니다 : 테이블; 그리고 아이들을 디스플레이로 사용 : table-cell. UR 당 요구 사항에 따라 prodNumber & prodDesc가 서로 종속되기를 원하므로이 두 요소를 모두 포함하는 하나의 외부 랩을 추가하십시오. 여기에 작업 파일을 참조하십시오 : urlhttp://jsfiddle.net/wZ3n3/

추신 : 더 많은 텍스트를 추가하십시오.

희망 하시겠습니까? 대신 사업부의

출처

2014-02-10 20:00:07

div 텍스트를 세로로 정렬하는 방법은 무엇입니까?

답변

관련 문제