Question

我的部分代码粘贴在页面的左侧。我无法找到将这些按钮放在网站中间的方法。如果我添加中心或文本块中心只是试图让它看起来更好，它不起作用它只会广告文本上方的单选按钮符号，或者只是将符号移动到中间。

    <div class="jumbotron">
    <h1 class="jumbotron-heading"><center>Bazár Bez Havárie</center></h1>
    <p class="lead text-muted"><center>Vitajte v Bazáry Bez Havárie. Vyberte 
    si svoje auto.</center></p><br>
    <h2 class="jumbotron-heading"><center><b>Objednávkový formulár.</b>
    </center></h1><br>
    <form class="form-horizontal" role="form" method="get" 
    action="objednavka.php">
    <div class="form-group">
    <label for="name" class="col-sm-2 control-label"><center>Meno</center>
    </label>
    <div class="col-sm-12">
    <input type="text" class="form-control" id="name" name="name" 
    placeholder="" value="">
    </div>
    </div>
    <div class="form-group">
    <label for="email" class="col-sm-2 control-label"><center>Email</center>
    </label>
    <div class="col-sm-12">
    <input type="email" class="form-control" id="email" name="email" 
    placeholder="" value="">
    </div>
    </div>
    <div class="form-group">
    <label for="adress" class="col-sm-2 control-label">
    <center>Adresa</center></label>
    <div class="col-sm-12">
    <input type="adress" class="form-control" id="address" name="address" 
    placeholder="" value="">
    </div>
    </div>

    <h2><b>Auto na vyber</b></h2><br> 

   <div class="btn-group" data-toggle="buttons">

   <label class="btn btn-light">
   <input type="radio" name="options" id="option1" value="Ferrari GTC4Lusso" 
   autocomplete="off"><center> Ferrari GTC4Lusso </center>
   </label>

   <label class="btn btn-light">
   <input type="radio" name="options" id="option2" value="Porsche Carrera 
   GT" autocomplete="off"> <center>Porsche Carrera GT </center>
   </label>

   </div>
   <br><br>
   <h2><b>Farba auta</b></h2><br> <div class="btn-group" data-
   toggle="buttons">

这里是中间的

   <label class="btn btn-sample"> 
   <label class="btn btn-cierna btn-lg btn-lg">
   <input type="radio" name="tlacidla" id="tlacidla2" value="Čierna" 
   autocomplete="off"><center> Čierna </center>
   </label>
   <label class="btn btn-cervena btn-lg btn-lg">
   <input type="radio" name="tlacidla" id="tlacidla3" value="Červená" 
    autocomplete="off"><center> Červená </center>

在此结束

   </label>
   </div><br><br>
   <div class="form-group">

下面也是这个。

   <input type="submit" name="submit"  value="Potvrdit Objednavku" 
    class="btn btn-outline-danger">
    </div>
   </form>
   </div>

Answer 1

将HTML更改为：

 <div class="form-group align-items-center mx-auto">
    <input type="radio" class="form-control">
    <label for="exampleInputEmail1">Ferrari GTC4Lusso</label>
  </div>

并添加以下CSS：

.form-group {
  width: 100px;
    display: inline-block;
    margin: 5px;
}
.form-group label {
   display:block;
    width: 100px;
    text-align: center;
}
.form-group input {
   width: 20px;
    display: block;
    margin: 0px auto;
}

JSFiddle：https://jsfiddle.net/vf7qfghc/

＆＃13;

.form-group {
  width: 100px;
    display: inline-block;
    margin: 5px;
}
.form-group label {
   display:block;
    width: 100px;
    text-align: center;
}
.form-group input {
   width: 20px;
    display: block;
    margin: 0px auto;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">


<div class="form-group align-items-center mx-auto">
 
    <input type="radio" class="form-control">
   <label for="exampleInputEmail1">Ferrari GTC4Lusso</label>
  </div>

＆＃13;

Answer 2

您好，您可以通过在该标签之前添加简单的中心标签来解决它。或者当然使用CSS来解决它。

＆＃13;

<center>
	<label class="btn btn-light">
	<input type="radio" name="options" id="option1" value="Ferrari  GTC4Lusso" 
	autocomplete="off"><center> Ferrari GTC4Lusso </center>
	</label>
</center>

＆＃13;

Answer 3

只需将类文本中心添加到

即可

<div class="text-    
center ">
<label class="btn btn- 
light ">
<input type="radio" 
name ="options" 
id ="option1" 
value ="Ferrari       
GTC4Lusso " 
autocomplete="off">.   
<center> Ferrari GTC4Lusso </center>
</label>
</div>

如何在使用Bootstrap时居中HTML代码

3 个答案: