Text-Align not working with Buttons on CSS and HTML

Code Help
1

So I’m trying to add a button to my HTML and CSS project, but text-align in the CSS doesn’t seem to work

https://replit.com/@JohnnySuriano/AntiBordem-Button?v=1

CSS:

.button2{
  text-align: right;
  font-size: 25px;
  font-family: sans-serif;
  padding: 0.25em 0.5em;
  margin: 0.125em;
  border-radius: 1em;
  border: none;
  outline: none;
  color: white;
  background-color: #66706c;
  cursor: pointer;
}

.button2:hover{
  background-color: #577066;
}

HTML:

   <form method="post" action="/settings">
     <button class="button2" type="text">⚙️</button>
   </form>
2

You can’t assign text align to a button. You have to assign it the property to its parent.

Wrap the button around a div, and assign the div with the text align:

<form method="post" action="/settings">
  <div class="btnwrap">
     <button class="button2" type="text">⚙️</button>
 </div>
</form>

.btnwrap {
 text-align: right;
}
1 Like
3

I could be wrong but it looks like you have this css:

html, body {
  text-align: center; /* This right here */
  background-color: #303030;
  color: #dddddd;
  font-family: sans-serif;
  font-weight: bold;
  margin: 50px;
}

and since the button (button2) in inside the body everything is centered. So you may want to change that.
I tried @ValiantWind’s code and it works so I’d recommend it.

4

If a child element is assigned a different property than the one on its parent property (assuming the child element supports the said property), text align for the div will override the text align for the body.

Think of the properties of a parent element as the default, which will only change the value for the child element that overrides it.

i.e.

<html>
   <body> 
      <div class="testdiv">

      </div>
   </body>
</html>

html, body {
     text-align: center;
}

.testdiv {
    text-align: right; /* This will override text align for testdiv. */
}

I hope this gave you a better understanding of how it works :slight_smile:

5

Could position: fixed be useful too? I know fundamentally know how it works / what it does, but not sure if it could be used here.

6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.