無法居中按鈕

我遇到了一個關於讓按鈕居中的問題，我試過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>

來源

2017-04-27 rinaldy31

我敢肯定有一些CSS的地方，會影響你的按鈕。從你的代碼中，我看不到至少有class * btn *分配給你的按鈕。 – Robert

@Robert類btn是從引導 – rinaldy31

你可以試試這個：

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

來源

2017-04-27 04:49:02

它的工作！ thanksssssss – rinaldy31

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>

來源

2017-04-27 04:48:45

它不工作，引導css干擾我的css？ – rinaldy31

使用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>

來源

2017-04-27 04:50:42 athi

我把那個，但它不工作.. can bootstrap css干擾css？ – rinaldy31

使用我的代碼，運行良好。

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

來源

2017-04-27 04:55:42

是的，它的工作！謝謝 – rinaldy31

無法居中按鈕

回答

相關問題