如何将文本垂直对齐在桌面上的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/，你想修复颜色吗？

Answer 2

在要在中心显示文字的div上应用最小值和最大值height:50px。然后应用vertical-align: middle;

Answer 3

如果您可以像这样更新标记，它会更容易。然后，您可以轻松使用表格单元格的垂直对齐功能。

<td valign="middle" class="ostitulo">
    <div class="osnumero">
        <span class="osnumerospan">1435</span>
        <span class="par">Lorem</span> 
    </div>         
</td>

.osnumero span {
    display: table-cell;
    vertical-align: middle;
}

的 UPDATED JSFIDDLE

.ostable {
    width: 220px;
    border-collapse: collapse;
}
.ostable td {
    border: 1px solid black;
}
.osnumero {
    display: table;
    height: 25px;
    width: 100%;
}
.osnumero span {
    display: table-cell;
    vertical-align: middle;
}
.osnumerospan {
    width: 40px;
    text-align: center;
    background-color: red;
    border-right: 1px solid black;
}
.par {
    background-color: silver;
}

<br>
<table class="ostable">
    <tr>
        <td valign="middle" class="ostitulo">
            <div class="osnumero">
                <span class="osnumerospan">1435</span>
                <span class="par">Lorem</span> 
            </div>         
        </td>          
    </tr>      
    <tr>
        <td valign="top">
            <div style="margin: 3px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
        </td>
    </tr>
</table>