How to align text vertically center in div on table?

Question

I'm trying to centralize my text "lorem" inside my however have a div containing the number "1435" What am I doing wrong?

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;
   }

The source is: http://jsfiddle.net/47m5tfLu/

Answer 1

Having your par class like so:

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

Centers it for me: http://jsfiddle.net/bzzLuy6g/ , are you trying to fix the colors?

Answer 2

Apply the min and max height:50px on the div you want to show text in center. Then apply vertical-align: middle;

Answer 3

It will make it much easier If you can update the markup like this. Then you can easily use the great vertical alignment feature of table cells.

<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>