如何垂直对齐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文本？

回答

相关问题