47

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.

3
  • Have you tried adding align="center" on the TD?"
    – Billy Moat
    Commented Mar 13, 2014 at 16:48
  • 4
    what about text-align:center?
    – T J
    Commented Mar 13, 2014 at 16:48
  • 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. Commented Mar 13, 2014 at 17:01

8 Answers 8

83

You can use :

display: block;
margin: auto;

Here is your updated plunkr

2
  • 5
    It figures that the correct solution is the least understandable. Commented Mar 13, 2014 at 17:03
  • 3
    css got its own mysteries :)
    – meriadec
    Commented Mar 13, 2014 at 17:39
17

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>

2
  • 7
    The align attribute was removed in HTML5.
    – dsgriffin
    Commented Mar 13, 2014 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
    Commented Mar 13, 2014 at 16:51
9

This worked for me

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

4

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.

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>
2

It worked fine for me

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

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

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

worked for me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.