Having difficulty aligning the button in the center

Question

Having difficulty aligning the button in the center

I encountered an issue trying to center a button, I attempted to use text-align: center, but it didn't have the desired effect.

.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>

html css

Answer 1

Answer №1

Feel free to give this a shot:

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

Answer 2

Feel free to give this a shot:

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

Answer 3

Answer №2

text-align: center simply centers the content inside the element. In this case, you centered the text inside the button.

If the button is the only element in the row, consider wrapping it in a div instead.

Check out this demo to see how 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>

Answer 4

text-align: center simply centers the content inside the element. In this case, you centered the text inside the button.

If the button is the only element in the row, consider wrapping it in a div instead.

Check out this demo to see how 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>

Answer 5

Answer №3

Ensure the button is centered using margin: 0 auto; and display: block;.

.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>

Answer 6

Ensure the button is centered using margin: 0 auto; and display: block;.

.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>

Answer 7

Answer №4

Solution: Feel free to utilize the code snippet below.

.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>

Answer 8

Solution: Feel free to utilize the code snippet below.

.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>

Having difficulty aligning the button in the center

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Achieving Vertical Tabs on Larger Screens and Horizontal Tabs on Smaller Screens with Css Bootstrap 4

Postpone the execution of the toggleClass function

What is the best way to utilize mouseenter and mouseleave events concurrently?

Exploring Angular 6's nested routes and corresponding components for child navigation

if jade is being inconsistent

What is the best technique for vertically aligning text within two divs placed side by side?

The overlay of the background image is excessively oversized

Is there a way to move the navbar to the right side of the screen?

Issue with the display of images

Include image hover text without using HTML

Chrome's XPath attribute selection is not functioning properly

Using JQuery to handle click events on an array of checkboxes and displaying the value of the selected

What's the reason this picture isn't displaying in its full size?

What is the best way to remove input focus when clicked away?

What is the best method for adding anchors or appending items in aspx pages?

Differences in tabstrip appearance between FireFox on Mac and Ubuntu compared to FireFox on PC

A guide to using JavaScript to create a button that can dynamically change stylesheets

In search of a render function that can effectively apply styles to HTML strings using React JS

Incorporate External Web Page Information by Clicking a Button

Menu options disappearing upon clicking within the container area