CODEWITHSUNDEEP
htmlcss
rinaldy31
rinaldy31

Reputation: 127

Unable to center button

I faced a problem about getting a button to center, I tried the text-align: center, but it didn't work.

.regis-btn {
  border-radius: 0px;
  text-align: center;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
}
<form action="" method="post" role="form">
  <div class="form-group">
    <label for="cellphone">Cellphone Number</label>
    <input type="text" class="form-control" id="cellphone" minlength="10" placeholder="Cellphone">
  </div>
  <div class="form-group">
    <label for="name">Username</label>
    <input type="text" class="form-control" id="name" placeholder="Username">
  </div>
  <div class="form-group">
    <label for="seriesnum">Series Number</label>
    <input type="text" class="form-control" id="seriesnum" placeholder="Series Number">
  </div>
  <button type="button" class="btn regis-btn" id="register" style="background: #FFCC00;">
           <span> Register </span>
       </button>
</form>

Upvotes: 0

Views: 117

Answers (4)

Yangshun Tay
Yangshun Tay

Reputation: 53229

text-align: center only centers the content within the element. So what you have done was to center the text within the button.

If your button is the only element in the row, wrap the button in a div instead.

I added a demo to show that it works:

.btn-container {
    text-align: center;  
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form action="" method="post" role="form">
   <div class="form-group">
       <label for="cellphone">Cellphone Number</label>
       <input type="text" class="form-control" id="cellphone" minlength="10" placeholder="Cellphone">
   </div>
   <div class="form-group">
       <label for="name">Username</label>
       <input type="text" class="form-control" id="name" placeholder="Username">
   </div>
   <div class="form-group">
       <label for="seriesnum">Series Number</label>
       <input type="text" class="form-control" id="seriesnum" placeholder="Series Number">
   </div>
   <div class="btn-container">
       <button type="button" class="btn regis-btn" id="register" style="background: #FFCC00;">
           <span>Register</span>
       </button>
   </div>
</form>

Upvotes: 3

Awadhesh verma
Awadhesh verma

Reputation: 540

Use My code that is working very well.

.regis-btn {
    border-radius: 0px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;     
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form action="" method="post" role="form">
   <div class="form-group">
       <label for="cellphone">Cellphone Number</label>
       <input type="text" class="form-control" id="cellphone" minlength="10" placeholder="Cellphone">
   </div>
   <div class="form-group">
       <label for="name">Username</label>
       <input type="text" class="form-control" id="name" placeholder="Username">
   </div>
   <div class="form-group">
       <label for="seriesnum">Series Number</label>
       <input type="text" class="form-control" id="seriesnum" placeholder="Series Number">
   </div>
   <div class="text-center">
   <button type="button" class="btn regis-btn" id="register" style="background: #FFCC00;">
       <span> Register </span>
   </button>
   </div>
</form>

Upvotes: 2

athi
athi

Reputation: 1683

Use margin: 0 auto; and display: block; for button.

.regis-btn {
  border-radius: 0px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  text-align: center;
  margin: 0 auto;
  display: block;
}
<form action="" method="post" role="form">
  <div class="form-group">
    <label for="cellphone">Cellphone Number</label>
    <input type="text" class="form-control" id="cellphone" minlength="10" placeholder="Cellphone">
  </div>
  <div class="form-group">
    <label for="name">Username</label>
    <input type="text" class="form-control" id="name" placeholder="Username">
  </div>
  <div class="form-group">
    <label for="seriesnum">Series Number</label>
    <input type="text" class="form-control" id="seriesnum" placeholder="Series Number">
  </div>
  <button type="button" class="btn regis-btn" id="register" style="background: #FFCC00;">
                  <span>
                     Register
                  </span>
              </button>
</form>

Upvotes: 2

tom nguyen
tom nguyen

Reputation: 316

You can try this: 

<div class="form-group text-center"> 
    <button type="button" class="btn regis-btn" id="register" style="background: #FFCC00;"></button>
</div>

Upvotes: 4

Related Questions