Вертикальный выравнивать заголовок с предупреждением и кнопкой

Question

Я пытаюсь вертикально выровнять заголовок заголовка, предупреждение и две кнопки. Моя цель - увеличить ширину оповещения, даже если ее содержимое короткое. Моя проблема в том, что, поскольку я использую 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

Answer 1

Чтобы сделать это легко, вы должны использовать гибкий:

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