Trying to center align button in td

Question

I'm having trouble centering a button in a td.

This is probably a simple CSS issue, but the app is using bootstrap, AngularJS, AngularJS-ui-bootstrap, and ngTable. I've included all of these components in my plunkr.

I'm trying to set "horizontal-align: middle" on the td with the button, but that doesn't seem to get applied. The button still leans to the left side of the cell.

Did anyone but @dawuut notice that I already had this? I would have thought I have a problem with the "specificity" of that css rule, but dawuut's solution, which just changes the css rule where I had the "horizontal-align" and "text-align" settings, does actually work. — David M. Karr, Mar 13 '14 at 17:01

meriadec · Accepted Answer · 2016-08-30T19:40:22.187

81

You can use :

display: block;
margin: auto;

Here is your updated plunkr

edited Aug 30 '16 at 19:40

answered Mar 13 '14 at 16:49

meriadec

2,953
18
20

5

It figures that the correct solution is the least understandable. – David M. Karr Mar 13 '14 at 17:03
2

css got its own mysteries :) – meriadec Mar 13 '14 at 17:39

score 15 · Answer 2 · answered Mar 13 '14 at 16:49

15

As I said in my comment above simply change the TD to have the align="center" property.

<td align="center"></td>

Since posting this I've discovered that this is deprecated in HTML5 so best just to use "text-align: center" on the TD in your CSS>

answered Mar 13 '14 at 16:49

Billy Moat

20,792
7
45
37

7

The align attribute was removed in HTML5. – dsgriffin Mar 13 '14 at 16:50
2

@null - You learn a new thing everyday! It does still work but best to use CSS instead then I guess. – Billy Moat Mar 13 '14 at 16:51

score 9 · Answer 3 · answered Jun 21 '16 at 14:36

9

This worked for me

<td style="text-align: center">

answered Jun 21 '16 at 14:36

vineel

3,483
2
29
33

score 3 · Answer 4 · answered Apr 10 '15 at 06:50

3

I found that I had to combine the following attributes to center JSF controls on a page:

<h:form style="display: block; text-align: center; margin: auto; width: 200px">
<!-- components here -->
</h:form>

answered Apr 10 '15 at 06:50

Fuzzy Analysis

3,168
2
42
66

score 3 · Answer 5 · edited Jul 18 '19 at 14:46

If you are using Bootstrap 4 add these classes to the <td> element (mine has 2 buttons):

<td class="text-center align-middle">
    <div class="btn-group">
        <button class="btn btn-outline-primary">+</button>
        <button class="btn btn-outline-primary">-</button>
    </div>                
</td>

text-center will center content horizontally, while align-middle centers content vertically.

score 2 · Answer 6 · answered Jun 21 '18 at 11:56

2

It worked fine for me

<td align="center">
 <input type="button" style="float:none!important;display:inline;" value="click" />
</td>

answered Jun 21 '18 at 11:56

Sundaramoorthy Anandh

571
2
5
13

score 1 · Answer 7 · answered Mar 09 '16 at 13:39

1

Alter the button instead of td? Make less impact on the style.

table .btn{
  vertical-align: top;
}

answered Mar 09 '16 at 13:39

Jens Alenius

1,931
2
16
20

score 0 · Answer 8 · answered Apr 09 '18 at 03:17

0

HTML:
    <td class="table-row-radio-button"> <input type="radio"> </td>
CSS:
    .table-row-radio-button {
        text-align: center;
    }

worked for me.

answered Apr 09 '18 at 03:17

Vinay

153
1
2
10

Trying to center align button in td

8 Answers8