Center Bootstrap Button

Question

Ich habe Probleme mit der Zentrierung Bootstrap-Taste im Panel. Rand rechts und links Auto funktioniert nicht. Gibt es eine Möglichkeit, den Knopf richtig zu zentrieren? Der Button muss wegen der mobilen Waage zentriert sein.

Code:

<div class="n_monitor"> 
    <div class="panel panel-default"> 
     <div class="panel-body"> 
      <div class="btn-group"> 
       <button type="button" class="btn btn-default">Server 1</button> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
        <span class="caret"></span> 
        <span class="sr-only">Toggle Dropdown</span> 
       </button> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

CSS:

.n_monitor .panel { 
    width: 628px; 
    border: solid 1px #ebebeb; 
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px; 
    border-bottom-left-radius: 3px; 
    border-bottom-right-radius: 3px; 
    height: 94px; 
    box-shadow: none; 
    margin: 0; 
    background-color: #f4f4f4; 
    margin-left: auto; 
    margin-right: auto; 
} 

.n_monitor .btn { 
    width: 126px; 
    height: 54px; 
    background-color: #3baed8; 
    border: none; 
    color: #fff; 
    font-size: 14px; 
    border-radius: 3px; 
} 

Answer 1

hinzufügen Bootstrap des Alignment Classtext-center zu .panel-body.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
.n_monitor .panel { 
 
    width: 100%; 
 
    border: solid 1px #ebebeb; 
 
    border-top-left-radius: 0px; 
 
    border-top-right-radius: 0px; 
 
    border-bottom-left-radius: 3px; 
 
    border-bottom-right-radius: 3px; 
 
    height: 94px; 
 
    box-shadow: none; 
 
    margin: 0; 
 
    background-color: #f4f4f4; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.n_monitor .btn { 
 
    width: 126px; 
 
    height: 54px; 
 
    background-color: #3baed8; 
 
    border: none; 
 
    color: #fff; 
 
    font-size: 14px; 
 
    border-radius: 3px; 
 
}

<div class="n_monitor"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body text-center"> 
 
     <div class="btn-group"> 
 
      <button type="button" class="btn btn-default">Server 1</button> 
 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
      <span class="caret"></span> 
 
      <span class="sr-only">Toggle Dropdown</span> 
 
      </button> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Sie können einfach "Mitte-Block" Klasse der Schaltfläche hinzuzufügen.

z.B.

<button class = "center-block">Test</button> 

Answer 3

Das funktioniert immer das Beste für mich. Besonderheit bei der Verwendung von Bootstrap funktioniert es perfekt.

#button{ 
display: table; margin: 0 auto; 
} 

Answer 4

Zentrum der Text auf der Eltern-Taste (.n_monitor .panel-Körper)

.n_monitor .panel-body 
{ 
    text-align: center; 
}