使用css垂直居中按钮 [英] Vertically centering button using css

问题描述

我的标记是：

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

可以在这里查看：

http://jsfiddle.net/tP4sD/

我已经完成了一个表格版本，向您展示了我试图实现的布局。需要注意的是通过 XXXXX 或 YYYYYY 所表示的文本的长度是可变的

解决方案

http://jsfiddle.net/8v8gLn4y/

  .container {background：lightblue;显示：表格; width：100％;} input [type = button] {display：block;宽度：50％; margin：0 auto;} .button-wrapper {background：darkorange; display：table-cell; vertical-align：middle;}  

< div class = '容器' > < div>一段文字< / div> < div>另一行文字< / div> < div class ='button-wrapper'> < input type =buttonvalue =submit/> < / DIV> < / div>

>：

flexbox http://jsfiddle.net/9knLeab6/1/


I am trying to make a simple input button center-align within a table cell.

My markup is:

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

And may be viewed here:

http://jsfiddle.net/tP4sD/

I have done a table version showing you the layout that I am trying to achieve. Note that the text represented by "XXXXX" or "YYYYYY" is of variable length.

解决方案

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>

update 2016:
flexbox http://jsfiddle.net/9knLeab6/1/

这篇关于使用css垂直居中按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！