web-dev-qa-db-fra.com

Bouton de centrage vertical à l'aide de css

J'essaie de faire un simple bouton d'entrée aligner au centre dans une cellule de tableau.

Mon balisage est:

<table width="500" border="1">
    <tr>
        <td width="390">XXXXXXXXX</td>
        <td width="110" rowspan="2" valign="middle"><input type="button" value="submit"></td>
    </tr>
    <tr>
        <td>YYYYYYYY</td>
    </tr>
</table>
<br /><br />
<div style="width:500px;">

Et peut être consulté ici:

http://jsfiddle.net/tP4sD/

J'ai fait une version de tableau vous montrant la mise en page que j'essaie de réaliser. Notez que le texte représenté par "XXXXX" ou "YYYYYY" est de longueur variable.

htmlcsslayout
19
Dino

http://jsfiddle.net/8v8gLn4y/

.container {
  background: lightblue;
  display: table;
  width:100%;
}
        
input[type=button] {    
  display: block;
  width: 50%;
  margin: 0 auto;
}
        
.button-wrapper {
  background: darkorange;
  display: table-cell;
  vertical-align: middle;
}
<div class='container'>
    
  <div>some line with text</div>
  <div>another line with text</div>    
    
  <div class='button-wrapper'>
    <input type="button" value="submit"  />
  </div>
    
</div>

mise à jour 2016 :
flexbox http://jsfiddle.net/9knLeab6/1/

36
sqram