垂直對齊標題與警報和按鈕

我想垂直對齊標題標題，警報和兩個按鈕。我的目標是讓警報的寬度更大，即使其內容很短。我的問題是，因爲我使用span作爲警報，所以我需要將它放在display: inline-block的樣式中，但是通過這樣做，與標頭的對齊會錯位。順便說一句，我正在使用Bootstrap。垂直對齊標題與警報和按鈕

這裏是什麼，我希望發生的形象：

這裏是我的HTML：

<h1> 
    <span>This will be a very long title</span> 
    <span class="alert custom"> 
     This is notification! 
    </span> 
    <span class="pull-right"> 
     <button class="btn button-round">O</button> 
     <button class="btn button-round">X</button> 
    </span> 
</h1>

這裏是我的CSS：

.button-round { 
    border-radius: 50%; 
    color: white; 
    background: green; 
} 

.custom{ 
    font-size: 12px; 
    vertical-align: middle; 
    background: green; 
    color: white; 
}

這裏是一個的jsfiddle我當前代碼： JSFiddle of my current code

來源

2017-02-19 shriekyphantom

爲了簡單起見，你應該使用柔性：

.button-round { 
 
    border-radius: 50%; 
 
    color: white; 
 
    background: green; 
 
    margin: auto 
 
} 
 

 
.custom { 
 
    font-size: 12px; 
 
    vertical-align: middle; 
 
    background: green; 
 
    color: white; 
 
    /* added */ 
 
    flex: 1; 
 
    margin: 0 0.25em; 
 
} 
 

 
h1 { 
 
    display: flex; 
 
} 
 

 

 
/* end added */

<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>--> 
 
<h1> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <span>This will be a very long title</span> 
 
    <span class="alert custom"> 
 
    This is notification! 
 
</span> 
 
    <span class="pull-right"> 
 
    <button class="btn button-round">O</button> 
 
    <button class="btn button-round">X</button> 
 
</span> 
 
</h1>

https://jsfiddle.net/fczbe58L/1/

來源

2017-02-19 12:36:23

非常感謝您！這工作完美。 – shriekyphantom

垂直對齊標題與警報和按鈕

回答

相關問題