how to text-align: left on a Button

Question

in a aspx page

how to text-align: left on a Button

i set like this

Style="text-align: left"

it dont help, the text are still centered

Answer 1

Without showing us your HTML is it going to be hard to say. If you're using a third party framework like Bootstrap it is possible it is overriding your settings. If you have additional CSS classes applied they can stomp over things as well.

The easiest way to figure out what is going on is to load the page in the browser and do the following:

1. Open the developer tools (F12)
2. Use the Select an Element tool in the top left corner to select your button. This takes you to the corresponding HTML.
3. On the right side is the Styles tab. It will show you what styles are being applied and from where. The topmost styling wins. You can uncheck and check styles to remove/add them to test things out. If you still can't figure it out then go to the Computed tab and find the text-align property in the list of CSS properties. It will show you who ultimately is controlling the setting.

Answer 2

Hi @Simon,

“text-align: left” should work, I guess you want to remove the margin. You can try the following code.

 <asp:Button ID="Button1" runat="server" Text="Button"  style="padding-left:0px; margin-left:0px;"   />

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread

Answer 3

As a general rule, if you don't make the button "larger" then the text, then you tend to not see any effects of text-align.

However, if you make the button "larger" then the text, then text-align should work.

Hence say this markup for a asp.net button.

Note how I wanted to space out the next two buttons, so I added a margin-left.

            <asp:Button ID="Button1" runat="server" Text="Test button"
                width="200px"
                style="text-align:left"/>

            <asp:Button ID="Button2" runat="server" Text="Test button"
                width="200px"
                style="text-align:right;margin-left:50px"/>

            <asp:Button ID="Button3" runat="server" Text="Test button"
                width="200px"
                style="text-align:center;margin-left:50px"/>

And the result is thus this:

And note how easy it is to add space between each button (no need for say using some table layout - just move each button over by adding margin-left.

So, a style with text-align should work, but the button "width" will have to be set larger then the button text which by default will set the length of the button to see such effects. And even if you using a button class such as bootstrap, or whatever?

Then say this markup:

            <asp:Button ID="Button1" runat="server" Text="Test button"
                width="200px"
                CssClass="btn burkebuttn"
                style="text-align:left"/>

            <asp:Button ID="Button2" runat="server" Text="Test button"
                width="200px"
                CssClass="btn burkebuttn"
                style="text-align:right;margin-left:50px"/>

            <asp:Button ID="Button3" runat="server" Text="Test button"
                CssClass="btn burkebuttn"
                width="200px"
                style="text-align:center;margin-left:50px"/>

Then once again, the text-align should still be respected.

Hence this: