Question

请看一下。这是plunker演示

第一个div 我想把文字放在中心位置＆＃34; A＆＃34;和＃34;网页设计师和开发者＆＃34;。＆＃34; A＆＃34;必须有其他部分的高度。对于第二个div 文字＆＃34;摄影师＆＃34;必须垂直对齐。

这里有什么问题？

.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

您不能对浮动的元素使用垂直对齐。

这里我删除了浮点数，向右边添加了一个-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

CSS样式vertical-align不起作用

1 个答案: