Search code examples
javascripthtmlcssweb-frontend

How do I align a button center of the web page?

I want to align this button centre of the web page; any ideas how to do that?

<button id="user-button" class="Sign-in"> Sign in </button>

<style>

 .Sign-in{
background-color: springgreen;
border: none;
color: white;
padding: 15px 25px;
text-align: center;
font-size: 18px;
cursor: pointer;
border-radius: 10px;
font-family: Lobster, helvetica;      

 }
</style>
Solution

  • Try wrapping the button in a div and giving that div a text-align property of center.

    CSS: 

    #button-container {
  text-align: center;
}
    <div id="button-container">
  <button>Center Me</button>
</div>