html – 使用css的垂直居中按钮

前端之家收集整理的这篇文章主要介绍了html – 使用css的垂直居中按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图使一个简单的输入按钮在一个表单元格中心对齐.

我的标记是:

  1. <table width="500" border="1">
  2. <tr>
  3. <td width="390">XXXXXXXXX</td>
  4. <td width="110" rowspan="2" valign="middle"><input type="button" value="submit"></td>
  5. </tr>
  6. <tr>
  7. <td>YYYYYYYY</td>
  8. </tr>
  9. </table>
  10. <br /><br />
  11. <div style="width:500px;">

可以在这里查看:

http://jsfiddle.net/tP4sD/

我已经做了一个表格版本,显示了我正在努力实现的布局.请注意,“XXXXX”或“YYYYYY”表示的文本长度可变.

解决方法

http://jsfiddle.net/8v8gLn4y/
  1. .container {
  2. background: lightblue;
  3. display: table;
  4. width:100%;
  5. }
  6. input[type=button] {
  7. vertical-align: middle;
  8. display: block;
  9. width: 50%;
  10. margin: 0 auto;
  11. }
  12. .button-wrapper {
  13. background: darkorange;
  14. display: table-cell;
  15. vertical-align: middle;
  16. }
  1. <div class='container'>
  2. <div>some line with text</div>
  3. <div>another line with text</div>
  4. <div class='button-wrapper'>
  5. <input type="button" value="submit" />
  6. </div>
  7. </div>

2016年更新:
flexBox http://jsfiddle.net/9knLeab6/1/

猜你在找的HTML相关文章