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

Question

我是一名有用的助手，可以帮助您翻译文本。

我正在尝试将我的文本“lorem”居中放置在我的

元素中，但是却有一个包含数字“1435”的

元素。我做错了什么？

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/

- Leo Vitor

Answer 1

在你想要显示文本的 div 上应用最小和最大 height:50px。然后应用 vertical-align: middle;

- Zeshan Khan

Answer 2

如果你的父类像这样：

.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/，你是在尝试修复颜色吗？

- HarrisJT