Reputation: 127
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
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
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
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
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