html - 如何使按钮在表格单元格内居中

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 元素 content 垂直居中，但是如果您还给 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>

编辑 2019

您可以使用 flexbox 实现相同的效果。但是，这意味着 border-spacing 属性不再适用，因此您需要对单元格边距进行一些微调。

基本上，您将 flex 属性设置为:

.my_table tr {
  display:flex;
}

.my_table td {
  margin: 2px;
  height: 60px;
  display:flex;
  flex-grow:1;
  /* centering the button */
  align-items:center;
  justify-content:center;
}


.inner_button {
  display:flex;
  /* centering the text inside the button */
  align-items:center;
  justify-content:center;

  /* plus the other properties */
}

有了这个，您不再需要玩 span，并且 child 的对齐方式得到明确控制。

table,  td{
  border: solid;
 
}
.my_table {
	width: 312px;
	margin: 0 auto;
}
.my_table tr {
  display:flex;
}
 
.my_table td {
  margin: 2px;
  height: 60px;
  display:flex;
  flex-grow:1;
  align-items:center;
  justify-content:center;
}
 

.inner_button {
  align-items:center;
  justify-content:center;
  display:flex;
  width:104px;
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background-color:#fbfbfb;
  text-align:center;
  border-radius:8px; 
  border:2px solid #dcdcdc;
  color:#939393;
	font-family:arial;
	font-size:15px;
	height:45px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
	word-wrap:break-word;
	
}

.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="#">
       AAAAAAAA
                
        </a>
      </td>
      <td class="right_button_cell">
        <a class="inner_button" href="#">
         BBBBBBBB BBBBBBBB
        </a>
      </td>

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

无论如何，一旦切换到此布局，就没有理由坚持使用表格，您不妨将布局转换为 div。