How to center a button

Question

I'm trying to center the submit button at the bottom.

Here is the code:

* {
  margin: 0px;
  padding: 0px;

}

body {
  font-size: 120%;
  background: #F8F8FF;

}

.header {
  width: 30%;
  margin:50px auto 0px;
  color: white;
  background: #5F9EA0;
  text-align:center;
  border: 1px solid #B0C4DE;
  border-bottom: none;
  border-radius: 10px 10px 0px 0px;
  padding: 20px;


}

form, .content {
  width: 576px;
  margin: 0px auto;
  padding: 20px;
  border: 1px solid #B0C4DE;
  background: white;
  border-radius: 0px 0px 10px 10px;

}

.input-group {
  margin: 10px 0px 10px 0px;
}

.input-group label {
  display: block;
  text-align: left;
  margin: 3px;

} 

.input-group input {
  height: 20px;
  width: 60%;
  padding: 5px 10px;
  font-size: 1em;
  border-radius: 1px;
  border: 1px solid gray;
  margin-left: 3px;
} 

.btn {
  padding: 8px;
  font-size: 1em;
  color: white;
  background: #5F9EA0;
  border: none;
  border-radius: 5px;
  margin:0 auto;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Register-Art and chill</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<div class="header">
  <h2> Register </h2>
</div>

<form method="post" action="register.php">
  <div class="input-group">
    <label> Username </label>
    <input type="text" name="username">
  </div>
  <div class="input-group">
    <label> Email </label>
    <input type="email" name="email">
  </div>
  <div class="input-group">
    <label> Password </label>
    <input type="password" name="password_1">
  </div>
  <div class="input-group">
    <label> ConfirmPassword </label>
    <input type="password" name="password_2">
  </div>
  <div class="input-group">
    <button type="submit" class="btn"> Register </button>
  </div>
   </form>

 </body>
</html>

Can you provide a fiddle or some images showing what you're getting then explain what you expect to get and how it is different from what you have? — Brett Jeffreson, Nov 23 '17 at 00:36
Please don't say things like "I have tried everything" or reasons why you are sorry. You have already mentioned what your problem is and since you are seeking an answer, you believe that there is something you have tried. — CyanCoding, Nov 23 '17 at 02:04
Possible duplicate of [How to horizontally center a
in another
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div) — CyanCoding, Nov 23 '17 at 02:12

Protium · Answer 1 · 2017-11-23T02:16:10.350

2

Replace your .btn CSS class with this:

.btn {
   padding: 8px;
   font-size: 1em;
   color: white;
   background: #5F9EA0;
   border: none;
   border-radius: 5px;
   margin:0 auto;
   display:block;
}

The problem is the default display:inline-block

edited Nov 23 '17 at 02:16

answered Nov 23 '17 at 00:51

Protium

213
3
13

Hamed Adil · Answer 2 · 2017-11-23T00:58:05.097

Add display: block; to .btn class

To make it more neat and clean, replace your html with the following code:-

<form method="post" action="register.php">
    <div class="form-inner">

        <div class="input-group">
            <label> Username </label>
            <input type="text" name="username">
        </div>

        <div class="input-group">
            <label> Email </label>
            <input type="email" name="email">
        </div>

        <div class="input-group">
            <label> Password </label>
            <input type="password" name="password_1">
        </div>

        <div class="input-group">
            <label> ConfirmPassword </label>
            <input type="password" name="password_2">
        </div>

        <div class="input-group">
            <button type="submit" class="btn"> Register </button>
        </div>
    </div>
</form>

And add this to your CSS:-

.form-inner {
    width: 60%;
}

Live example here:- https://jsfiddle.net/sq6zow6v/

score 0 · Answer 3 · answered Nov 23 '17 at 00:42

You can put text-align: center; on the container that the button is in, i.e. .input-group. Of course if you put it in .input-group, all the other elements whose parent is an .input-group will be centered as well, so you might have to make a class just for the button or put an inline style on the button's .input-group parent.

CSS

.input-group-btn {
text-align:center;
}

HTML

<div class="input-group input-group-btn">
        <button type="submit" class="btn"> Register </button>
    </div>

How to center a button

3 Answers3