如何垂直對齊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>

這裏是CSS

.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-vertical-centering-text-in-another-div-with-relative-sizing – cirrus

使用表而不是DIV

  <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來有它的中心內容需要display: table-cell

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

的display:table-cell是什麼允許元素讓孩子垂直對齊，所以它必須在父母上才能讓孩子垂直對齊。

這裏是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。由於根據您的要求，您希望產品編號& prodDesc相互依賴，因此請添加一個包含這兩個元素的外部包裝。請參閱此處的工作文件：urlhttp://jsfiddle.net/wZ3n3/

PS：追加更多文本。

希望你有答案。

來源

2014-02-10 20:00:07

如何垂直對齊div文本？

回答

相關問題