2016-12-15 1 views
1

Ich bin für die effizienteste Bootstrap-Lösung, einen Knopf vertikal zentriert neben einem h3-TagWie kann ich eine Schaltfläche rechts von einem h3-Tag ausrichten und vertikal ausrichten?

button{ 
 
padding: 10px 18px; 
 
}
<head> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Alerts</h3> 
 
     <button>Add Alert</button> 
 
    </div 
 
    </div 
 
</body

ich es ausrichten möchten wie diese

enter image description here

aussehen

Antwort

2

Angenommen, Sie können die DOM-Struktur ändern, können Sie die Schaltfläche in das h3-Tag einfügen?

<h3 class="panel-title">Alerts <button class="btn btn-danger">Add Alert</button></h3> 

auch hinzufügen, eine Marge Trennung von dem Text hinzufügen

button{ 
    margin: 0px 10px; 
} 
0

Wissen, dass h3 ein Blockelement ist, versuchen Sie dies zu setzen ...

h3 { 
     display:inline-block; 
} 
Verwandte Themen