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

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/

演示