Vertical Align Header mit Alarm und Button

Question

Ich versuche, eine Titelzeile, eine Warnung und zwei Schaltflächen vertikal auszurichten. Mein Ziel ist es, die Breite des Alerts zu vergrößern, auch wenn der Inhalt kurz ist. Mein Problem ist, dass, da ich span für die Warnung verwende, ich display: inline-block in seinem Stil setzen muss, aber dadurch wird die Ausrichtung mit dem Header fehlausgerichtet. BTW, ich benutze Bootstrap.

Hier ist das Bild von dem, was ich passieren soll:

Hier ist mein 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> 

hier ist meine CSS:

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

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

Hier ist ein jsfiddle meiner aktueller code: JSFiddle of my current code

Answer 1

Um dies zu erleichtern, sollten Sie flex verwenden:

.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/