我试图使一个简单的输入按钮在一个表单元格中心对齐.
我的标记是:
- <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;">
可以在这里查看:
我已经做了一个表格版本,显示了我正在努力实现的布局.请注意,“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/