如何垂直和水平居中所有這些元素？

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;
}

演示 http://jsfiddle.net/gaby/M4crZ/1/

---

原始嘗試沒有垂直居中...

更好地嘗試這個

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