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

2023年8月26日 217次阅读

我想创建一个标题区域,左边和右边一直有前一个和下一个箭头按钮,同时在标题区域的中间有一些标题文本.诀窍在于我还希望标题区域内的所有三个元素也是垂直居中的,无论标题文本元素是否太长以至于它导致它具有比箭头链接更大的高度.

这是我想要实现的目标的粗略草图：

在顶部版本中,箭头(黑框)比标题文本高,但是,在底部版本中,文本高于箭头.在所有情况下,我希望所有内容都垂直居中,并且标题文本要水平居中(我的图像中未显示).

目前,这是我提出的最好的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以获得我想要的东西？谢谢.

最佳答案 如何制作容器位置：相对和绝对定位箭头？

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

点赞