如何將按鈕對齊到h3標籤的右側並使其垂直對齊？

我在尋找最有效的解決方案引導對齊垂直居中旁邊的一個H3標籤如何將按鈕對齊到h3標籤的右側並使其垂直對齊？

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

我希望它看起來像這樣

按鈕

來源

2016-12-15 apdm

假設您可以更改DOM結構，您可以將按鈕放在h3標籤內嗎？

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

此外，添加的邊距，以從所述文本添加分離

button{ 
    margin: 0px 10px; 
}

來源

2016-12-15 20:34:01 Lauwrentius

知道h3是一個塊元素，試着把這個...

h3 { 
     display:inline-block; 
}

來源

2016-12-15 20:07:44

如何將按鈕對齊到h3標籤的右側並使其垂直對齊？

回答

相關問題