CODEWITHSUNDEEP
htmlcssbuttontext-align
user9996887
user9996887

Reputation:

Why is the text-align property not working inside a button element?

button {
    text-align: center;
    font-size:50px;
    color:black;
    border:2px solid white;
    border-style:dotted;
    border-color:red;
}

When i run this code, all the properties work except the text-align. I don't understand why is the text-align not working when it's inside a button?

Note: Yes, i know there are ways to align the button in the center, i am not asking how to align the button, i am asking why is the text-align not working inside the button element like all the other properties are working?

Upvotes: 4

Views: 13861

Answers (2)

Aryan Twanju
Aryan Twanju

Reputation: 2516

It doesn't work like this. Assigning the text-align:center property to the button itself won't align it to center. You should assign this property to its parent. or you can assign width to the button and add margin: 0 auto; as alternative way.

Here is the solution for your issue. Add this CSS

.btnwrap {
  text-align: center;
}

And, wrap your button with <p>

<p class="btnwrap">
  <button>button 2</button>
</p>

Upvotes: 2

Lil Zyz
Lil Zyz

Reputation: 25

try to add margin auto

text-align: center;
margin: auto;

or give !important to text-align maybe there's another css code effecting ur button

Upvotes: 0

Related Questions