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

概述我试图使一个简单的输入按钮在一个表单元格中心对齐. 我的标记是： <table width="500" border="1"> <tr> <td width="390">XXXXXXXXX</td> <td width="110" rowspan="2" valign="middle"><input type="button" value="submit"> 我试图使一个简单的输入按钮在一个表单元格中心对齐.

我的标记是：

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

可以在这里查看：

http://jsfiddle.net/tP4sD/

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

解决方法 http://jsfiddle.net/8v8gLn4y/

.container {  background: lightblue;  display: table;  wIDth:100%;}        input[type=button] {      vertical-align: mIDdle;  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>

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

总结

以上是内存溢出为你收集整理的html – 使用css的垂直居中按钮全部内容，希望文章能够帮你解决html – 使用css的垂直居中按钮所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。