how to center the button inside a table cell

Question

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

However, it seems doesn't work for me.

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.

Here's the example code:

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

Answer 1

I usually do

  margin:auto;
  display:block;

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

  display:table-cell;

EDIT:

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.

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>

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.

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>

EDIT 2019

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.

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>

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.

Answer 2

Change display: table-cell to display: inline-block:

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