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

Question

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

但是,它似乎对我不起作用.

注意:我使用Display: table-cell组合Vertical-align: middle来居中按钮的文本.正如您所看到的,第一个按钮"AAAAAAA"的文本位于中间.

有人可以帮助我使按钮居中而不影响按钮的文本.先感谢您.

这是示例代码:

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

Answer 1

我经常这样做

  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>