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

Question

提问by shensw

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

我试图通过以下方式将一个按钮置于表格内： text-align: center

However, it seems doesn't work for me.

但是，它似乎对我不起作用。

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

注意：我使用Display: table-cellcombine withVertical-align: middle将按钮的文本居中。如您所见，第一个按钮“AAAAAAA”的文本位于中间。

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

回答by ffflabs

I usually do

我通常做

  margin:auto;
  display:block;

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

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

  display:table-cell;

EDIT:

编辑：

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

请记住，这样做会使a元素内容垂直居中，但如果您还为a元素指定了任意高度，则周围的背景将不会居中。

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

实施例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>

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.

您也可以将 line-height 设置为 32px，这适用于第一个按钮，但第二个按钮会中断。此外，您可以将按钮内边距设置为 6px 以实现相同的结果，而无需声明明确的高度（如 bootstrap 或 materialize 等 css 框架所做的那样），但第二个按钮上的换行符会导致按钮大小不均匀。

So, here's my suggested trick: set the aelement line height to be 32px, then wrap its inner text in a spanelement where you reset the line-height to 16px:

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

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

编辑 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.

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

Basically, you set flex properties as:

基本上，您将 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 */
}

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.

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

Answer 2

回答by rhino

Change display: table-cellto display: inline-block:

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

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

Answer 3

回答by John

I added this to the TableCell and it centered my ImageButton. I think we were running into the same issue.

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

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

Found my answer here: http://forums.asp.net/t/1418752.aspx?image+button+inside+table+cell

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

Answer 4

回答by arielnmz

You can use the table-celldisplay property of the container div and set the vertical-alignproperty to middle:

您可以使用table-cell容器 div的display 属性并将该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;
}

You can find the fiddle here.

你可以在这里找到小提琴。

Answer 5

回答by nikhil

this works

这有效

 td{
   align:center;
 }

simple and easy... hope it helps

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

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

提问by shensw

回答by ffflabs

回答by rhino

回答by John

回答by arielnmz

回答by nikhil

相关推荐

最近更新

标签

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

提问by shensw

回答by ffflabs

回答by rhino

回答by John

回答by arielnmz

回答by nikhil

相关推荐

Html 如何防止标题 (<h1>) 占用超过所需的宽度？

Html 使用base64编码图像的优缺点

Html 如何在引导程序中的容器内创建 100% 屏幕宽度 div？

如果一个 HTML 表单有两个 <input type="submit"> 按钮，我怎么知道哪个被点击了？

相关推荐

最近更新

标签