Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Trying to center align button in td

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.

like image 866
David M. Karr Avatar asked Mar 13 '14 16:03

David M. Karr


People also ask

How do you make a button center in TD?

We can align the buttons horizontally as well as vertically. We can center the button by using the following methods: text-align: center - By setting the value of text-align property of parent div tag to the center. margin: auto - By setting the value of margin property to auto.

How do you center a table button in a cell?

If you want to center a button in a table cell, you can set the text-align property of the button to “center”. You can align the text in table cells to suit your style by using the CSS property text-align. When a margin property is assigned to a margin auto, it is assigned a value.


2 Answers

You can use :

display: block; margin: auto; 

Here is your updated plunkr

like image 53
meriadec Avatar answered Oct 12 '22 03:10

meriadec


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>

like image 33
Billy Moat Avatar answered Oct 12 '22 02:10

Billy Moat