如何将按钮居中放置在表格单元格中 [英] how to center the button inside a table cell

问题描述

我尝试通过以下方式将表格内的按钮居中： text-align：center

I'm trying to center a button inside the table by : text-align: center

但是，

注意：我使用了 Display：table-cell 与垂直对齐：中间将按钮的文本居中。如您所见，第一个按钮 AAAAAAA的文本在中间。

Note: I used Display: table-cell combine with Vertical-align: middle to center the text of the button. As you can see the text of the first button "AAAAAAA" is in the middle.

有人可以帮助我在不影响按钮文本的情况下将按钮居中吗？
谢谢您。

Can someone help me to center the button without affecting the text of the button. Thank you in advance.

下面是示例代码：

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

推荐答案

我通常会这么做

  margin:auto;
  display:block;

我想@rhino答案也可以。记住删除

I guess @rhino answer works as well. Remember to remove

  display:table-cell;

编辑：

请记住，执行此操作将使 a 元素 content 垂直居中，但是如果您还给出一个元素任意高度，周围的背景将不会居中。

Keep in mind that doing this will get the a element content vertically centered, but if you also give the a element an arbitrary height, the surrounding background will not be centered.

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

Example 1: the text is vertically centered. But you set the button height to 32px and that surrounding container isn't:

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框架一样），但是第二个按钮上的换行符将导致按钮尺寸不均。

You could set the line-height to be also 32px, which would work for the first button, but the second one would break. Also, you could set a button padding of 6px to achieve the same result without declaring an explicit height (as css frameworks like bootstrap or materialize do) but the line break on the second button would result in uneven button sizes.

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

So, here's my suggested trick: set the a element line height to be 32px, then wrap its inner text in a span element where you reset the line-height to 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属性不再适用，因此您需要对单元格边距进行一些微调。

You can achieve the same using flexbox. However, this means the border-spacing property does no longer apply so you need to do some fine tuning to the cell margins.

基本上，将flex属性设置为：

Basically, you set flex properties as:

.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 */
}

这样一来，您就不再需要玩跨度，并且显式控制了子级的对齐。

With this you no longer need playing with spans, and the alignment of children is controlled explicitly.

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。

Anyway, once you switch to this layout there's no reason to stick to tables, and you might as well convert your layout to divs.

这篇关于如何将按钮居中放置在表格单元格中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！