ボタンを中央に置くことができない

Question

ボタンを中央に置くことに問題がありましたが、私はtext-align: centerを試しましたが、機能しませんでした。

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

Answer 1

あなたがこの試すことができます：ボタンの

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

Answer 2

text-align: centerのみ要素内のコンテンツを中心。つまり、ボタンの中にテキストを配置することでした。

ボタンが行の唯一の要素である場合は、代わりにdiv内にボタンをラップします。

私はそれが動作することを示すために、デモを追加しました：

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

使用margin: 0 auto;と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 4

は非常にうまく機能している私のコードを使用してください。

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