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

Question

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

htmlcssvertical-alignmentcenteringcss-tables

4

我希望创建一个页眉区域，左右两侧都有上一页和下一页箭头按钮，而页眉中央有一些文本。但是，我的要求是，无论页眉文本元素的高度是否比箭头链接大，我都希望这三个元素在页眉区域内垂直居中。

下面是我尝试实现效果的简单示意图：

enter image description here

在上面的版本中，箭头（黑色方块）比页眉文本更高，但在下面的版本中，文本比箭头更高。无论如何，我都希望一切都垂直居中，并且希望页眉文本水平居中（图片中没有显示）。

目前，这是我想到的最好的 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以达到想要的效果吗？谢谢。

- HartleySan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gabriele Petrioli · Accepted Answer

如何将容器设置为 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;
}

Demo at http://jsfiddle.net/gaby/M4crZ/3/