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.

Solution 1

You can use :

display: block;
margin: auto;

Here is your updated plunkr

Solution 2

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>

Solution 3

This worked for me

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

Solution 4

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>

Solution 5

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.

View more solutions

Comments

[dsgriffin]

The align attribute was removed in HTML5.

[Billy Moat]

@null - You learn a new thing everyday! It does still work but best to use CSS instead then I guess.

[David M. Karr]

It figures that the correct solution is the least understandable.

[meriadec]

css got its own mysteries :)