Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
html

How to align a button in the center of the div

Fahad Farid
svg viewer

Use the following steps to center align a button in a div container:

  1. Create a div container
  2. Insert the button tag
  3. In the CSS for the div set the text-align to center

The button and all the contents within the div should now be center aligned.

Here is a working code example that can help you better understand the concept:

<html>
  <head>
    <style>
      div{
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>
      <button>Enter</button>
    </div>
  </body>
</html>

We can also implement a way in which to only center align the button.

Use the following steps to center align a button in the middle of a div container:

  1. Create a div container
  2. Insert the button tag
  3. In the CSS for the button, set the margin to 0 auto
  4. Change the display to block

The button should now be center aligned.

Here is a working code example that can help you better understand the concept:

RELATED TAGS

css
html

CONTRIBUTOR

Fahad Farid
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring