html - CSS 样式垂直对齐不起作用

Question

请看。这是 plunker演示

对于第一个 div我想将文本“A”和“web designer and developer”居中。“A”必须有其他部分的高度。对于第二个分区文本“摄影师”必须垂直对齐。

这里有什么问题？

.intro .text h4,
.intro .text h5 {
  display: inline-block;
  font-size: 25px;
  line-height: 25px;
  text-transform: capitalize;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.intro .text h4 {
  float: left;
}
.intro .text h5 {
  float: left;
}
.intro .text h4 span {
  padding: 5px;
  font-size: 50px;
  line-height: 77px;
  text-transform: uppercase;
}
.intro .text h5 span {
  vertical-align: middle;
}

Answer 1

不能在 float 元素上使用垂直对齐。

我在这里删除了 float ，在右侧添加了 -4px 边距(以删除内联元素后的自然间距以保持边框在一起)并添加了一些填充。您可以将此技术用于您想要对齐的第二部分。

.intro .text h4, .intro .text h5{
  display: inline-block;
  font-size: 25px;
  line-height: 25px;
  text-transform: capitalize;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  vertical-align: middle;
}

.intro .text h4{
  margin-right: -4px;
}

.intro .text h5{
  padding-left: 5px;
}

http://codepen.io/anon/pen/gPpJma