如何将按钮置于表格单元格内

时间：2014-06-08 00:09:13

标签： html css

我试图通过以下方式将按钮放在桌子中间：text-align: center

然而，它似乎对我不起作用。

注意：我使用Display: table-cell与Vertical-align: middle结合使用按钮的文本居中。正如您可以看到第一个按钮的文本＆＃34; AAAAAAA＆＃34;在中间。

有人可以帮助我将按钮居中，而不会影响按钮的文字。 提前谢谢。

以下是示例代码：

http://codepen.io/anon/pen/pAcBx

5 个答案:

答案 0 :(得分：12)

我经常做

  margin:auto;
  display:block;

我猜@rhino的答案也有效。记得删除

  display:table-cell;

修改

请注意，执行此操作会使a元素内容垂直居中，但如果您还将a元素赋予任意高度，则周围的背景将不会集中精力。

示例1：文本 垂直居中。但是您将按钮高度设置为32px并且周围容器不是：

table, tr, td{
  border: solid;
 
}
.my_table {
	width: 312px;
	margin: 0 auto;
}

.dashed {
  border-bottom:1px dashed #99F;
  width:100%;
  display:block;
  position:absolute;
  font-size:0;
  top:43px;
}

/*BUTTON TABLE left CELL*/
.left_button_cell{
  margin: 0 auto;
	text-align: center;     /*<---- NOT WORKING */
	height: 50px;
	padding-top: 10px;
	line-height: 22px;
}


/*BUTTON TABLE right CELL*/
.right_button_cell{
	text-align: center; 
	height: 50px;
	padding-top: 10px;
	line-height: 22px;
}

.inner_button {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#fbfbfb;
	-webkit-border-top-left-radius:8px;
	-moz-border-radius-topleft:8px;
	border-top-left-radius:8px;
	-webkit-border-top-right-radius:8px;
	-moz-border-radius-topright:8px;
	border-top-right-radius:8px;
	-webkit-border-bottom-right-radius:8px;
	-moz-border-radius-bottomright:8px;
	border-bottom-right-radius:8px;
	-webkit-border-bottom-left-radius:8px;
	-moz-border-radius-bottomleft:8px;
	border-bottom-left-radius:8px;
	text-indent:0;
	border:2px solid #dcdcdc;
	display:block;
  margin:auto;
	color:#939393;
	font-family:arial;
	font-size:15px;
	font-weight:normal;
	font-style:normal;
	height:32px;
	line-height:16px;
	width:104px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #ffffff;
	word-wrap:break-word;
	vertical-align:middle;
}

 
.inner_button:hover {
	background-color:#EBEBEB;
}
.inner_button:active {
	position:relative;
	top:1px;
}
<div class="dashed"></div>
<table class="my_table">
  <tbody>
    <tr>
      <td class="left_button_cell">
        <a class="inner_button" href="#">AAAAAAAA</a>
        </td>
      <td class="right_button_cell">
      <a class="inner_button" href="#">BBBBBBBB BBBBBBBB</a>
      </td>

    </tr>
  </tbody>
</table>

您可以将行高设置为32px，这适用于第一个按钮，但第二个按钮会中断。此外，你可以设置一个6px的按钮填充来实现相同的结果而不声明显式高度（如bootstrap或materialize这样的css框架）但是第二个按钮上的换行会导致按钮大小不均匀。

所以，这是我建议的技巧：将a元素行高设置为32px，然后将其内部文本包装在重置行的span元素中 - 高度为16px：

table, tr, td{
  border: solid;
 
}
.my_table {
	width: 312px;
	margin: 0 auto;
}

/*BUTTON TABLE left CELL*/
.left_button_cell{
  margin: 0 auto;
	text-align: center;     /*<---- NOT WORKING */
	height: 50px;
	padding-top: 10px;
	line-height: 22px;
}


/*BUTTON TABLE right CELL*/
.right_button_cell{
	text-align: center; 
	height: 50px;
	padding-top: 10px;
	line-height: 22px;
}

.inner_button {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#fbfbfb;
	-webkit-border-top-left-radius:8px;
	-moz-border-radius-topleft:8px;
	border-top-left-radius:8px;
	-webkit-border-top-right-radius:8px;
	-moz-border-radius-topright:8px;
	border-top-right-radius:8px;
	-webkit-border-bottom-right-radius:8px;
	-moz-border-radius-bottomright:8px;
	border-bottom-right-radius:8px;
	-webkit-border-bottom-left-radius:8px;
	-moz-border-radius-bottomleft:8px;
	border-bottom-left-radius:8px;
	text-indent:0;
	border:2px solid #dcdcdc;
	display:block;
  margin: 0 auto;
	color:#939393;
	font-family:arial;
	font-size:15px;
	font-weight:normal;
	font-style:normal;
	height:32px;
	line-height:32px;
	width:104px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #ffffff;
	word-wrap:break-word;
	vertical-align:middle;
}

.inner_button span {
  line-height:16px;
  display:inline-block;
}
.inner_button:hover {
	background-color:#EBEBEB;
}
.inner_button:active {
	position:relative;
	top:1px;
}
<table class="my_table">
  <tbody>
    <tr>
      <td class="left_button_cell">
        <a class="inner_button" href="#">
          <span>AAAAAAAA
                  </span>
        </a>
      </td>
      <td class="right_button_cell">
        <a class="inner_button" href="#">
          <span>BBBBBBBB BBBBBBBB</span>
        </a>
      </td>

    </tr>
  </tbody>
</table>

答案 1 :(得分：1)

将display: table-cell更改为display: inline-block：

.inner_button {
    /* ... */
    display: inline-block;
    /* ... */
}

答案 2 :(得分：0)

我将它添加到TableCell中，它使我的ImageButton居中。我想我们遇到了同样的问题。

<asp:TableCell HorizontalAlign="Center" style="padding: 0px;">
    <asp:ImageButton/>
</asp:TableCell>

在这里找到我的答案：http://forums.asp.net/t/1418752.aspx?image+button+inside+table+cell

答案 3 :(得分：-1)

您可以使用容器div的table-cell显示属性，并将vertical-align属性设置为middle：

<强> HTML 

<div id="table">
    <div class="row">
        <div class="cell">
            <a href="">I'm your button</a>
        </div>
    </div>
</div>

<强> CSS 

#table {
    width: 300px;
    display: table;
    background: red;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    height: 200px;
    background: yellow;
    vertical-align: middle;
    text-align: center;
}

您可以找到the fiddle here。

答案 4 :(得分：-2)

这是有效的

 td{
   align:center;
 }

简单易行......希望有所帮助

相关问题
最新问题