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.
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.
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.
You can use :
display: block; margin: auto;
Here is your updated plunkr
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With