jquery - 如何在表格的div中垂直居中对齐文本？

Question

我试图将我的文本“lorem”集中在我的内部，但是有一个包含数字“1435”的 div我做错了什么？

HTML:

<table border="1" style="width:220px;">
  <tr>
    <td valign="middle" class="ostitulo">
        <div class="osnumero">
            <span class="osnumerospan">1435</span>
        </div>
        <p class="par">Lorem</p>          
    </td>          
  </tr>
</table>

CSS:

.ostitulo{
          font-family: Arial, Helvetica, sans-serif;
          font-size: small;
          font-weight: bold;
 }

.par{
          background-color: #c0c0c0;     
          line-height: 15px;    
 }

.osnumero{
          display:table; 
          width: 40px;
          height: 25px;
          border: 1px #808080 solid;
          border-top: 0px;
          border-left: 0px;  
          margin-right: 3px;
          margin-bottom: 3px;
          float:left;
          position: relative;
          top: 0px;
          left: 0px;      
 }

 .osnumerospan{
          display: table-cell;
          vertical-align: middle;
          text-align:center;
          background-color: red;
   }

来源是: http://jsfiddle.net/47m5tfLu/

Answer 1

让你的 par 类像这样:

.par {
    background-color: #c0c0c0; 
    min-height: 25px;
    margin-top: 5px;
    height: 25px;
    width:100px;
    display: table-cell;
    vertical-align: middle;
    line-height: 15px;    
}

为我居中:http://jsfiddle.net/bzzLuy6g/ ，您是否要修复颜色？