Выровнять по центру и вправо

Question

Мне нужно выровнять заголовок в центре и кнопки вправо. Иногда есть одна или две кнопки (они скрыты с помощью дисплея none).

Fiddle

<div> 
    <h1> 
     title 
    </h1> 
    <button> 
     button 1 
    </button> 
    <button> 
     button 2 
    </button> 
</div> 

Answer 1

В принципе, вы должны были бы использовать абсолютное позиционирование, чтобы взять кнопки (я завернул их здесь для простоты) из потока, так что название может центрировать.

.parent { 
 
    text-align: center; 
 
    position: relative; 
 
    border: 1px solid green; 
 
} 
 
h1 { 
 
    display: inline-block; 
 
} 
 
button { 
 
    display: inline-block; 
 
} 
 
.wrap { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    right: 0; 
 
}

<div class="parent"> 
 
    <h1> 
 
title 
 
</h1> 
 
    <div class="wrap"> 
 
    <button> 
 
     button 1 
 
    </button> 
 
    <button> 
 
     button 2 
 
    </button> 
 
    </div> 
 
</div>