无法居中按钮

我遇到了一个关于让按钮居中的问题，我试过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

无法居中按钮

回答

相关问题