Как вертикально и горизонтально центрировать все эти элементы?

Question

Я хочу создать область заголовка, которая имеет предыдущие и следующие кнопки со стрелками влево и вправо, имея текст заголовка в центре области заголовка. Фокус в том, что я также хочу, чтобы все три элемента в области заголовка также были центрированы по вертикали, независимо от того, является ли текстовый элемент заголовка настолько длинным, что он заставляет его иметь большую высоту, чем ссылки стрелки.

Вот грубый набросок того, что я пытаюсь достичь:

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

На данный момент это лучший HTML/CSS, с которым я столкнулся, но я знаю, что чего-то не хватает, и я не уверен, что это такое.

HTML:

<div class="container"> 
    <a href="#" class="prev"></a> 
    <h1>Header text</h1> 
    <a href="#" class="next"></a> 
</div> 

CSS:

.container { 
    display: table; 
} 

.prev, .next { 
    background: #000; 
    display: table-cell; 
    height: 50px; 
    vertical-align: middle; 
    width: 20px; 
} 

.prev { 
    float: left; 
} 

.next { 
    float: right; 
} 

h1 { 
    display: table-cell; 
    margin: 20px; 
    text-align: center; 
    vertical-align: middle; 
} 

Может кто-нибудь пожалуйста, предложить несколько советов о том, как я должен изменить свой HTML/CSS, чтобы получить то, что я хочу? Благодарю.

Answer 1

Как насчет создания контейнера position:relative и позиционирования стрелок?

.container{position:relative;} 
.prev, .next { 
    background: #000; 
    height: 50px; 
    width: 20px; 
    position:absolute; 
    top:50%; 
    margin-top:-25px; 
} 
.prev {left:0;} 
.next {right:0;} 
h1 { 
    text-align: center; 
    padding:0; 
    margin:0; 
    margin:0 20px; 
} 

Demo вhttp://jsfiddle.net/gaby/M4crZ/1/

---

Оригинал попытка не центрировать текст вертикально ...

Try это один лучше

.container{position:relative;display:table;border:1px solid #ccc;} 
.prev, .next { 
    background: #000; 
    height: 50px; 
    width: 20px; 
    position:absolute; 
    top:50%; 
    margin-top:-25px; 
} 
.prev {left:0;} 
.next {right:0;} 
h1 { 
    text-align: center; 
    padding:0 20px; 
    margin:0; 
    display:table-cell; 
    vertical-align:middle; 
} 

Демонстрация на http://jsfiddle.net/gaby/M4crZ/3/