HTML，CSS：箭头形状的div块，里面有文本（verticle-align应该是中间的）

Question

我想我可能会遗漏一些非常简单的事情。我想创建类似下面的内容：

这是我在StackOverflow上的一个问题的答案后尝试过的，但我不能再这样了。

.blockHead:after {
  color:#4D81BF;
  border-left: 20px solid;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  display: inline-block;
  content: '';
  position: absolute;
  right: -20px;

}
.blockHead {
  background-color:#4D81BF;
  /*width: 150px; */
  height: 40px;
  display: inline-block;
  position: relative;
}
.blocktext{
	color:white;
	font-weight:bold;
	padding-left:10px;
	font-family:Arial;
	font-size:11;
}

<div class="blockHead"><span class="blocktext">ABC Team</span></div>

问题是文本显示在div的顶部。我希望它在参考Div块时中间对齐。

拜托，对此的任何帮助都会非常感激。

提前致谢！

Answer 1

只需将line-height设置为与height

相同

此外，您应该将箭头对齐到顶部。

.blockHead {
  background-color: #4D81BF;
  /*width: 150px; */
  height: 40px;
  line-height: 40px;
  display: inline-block;
  position: relative;
}

.blockHead:after {
  color: #4D81BF;
  border-left: 20px solid;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  display: inline-block;
  content: '';
  position: absolute;
  right: -20px;
  top:0
  }

＆＃13;

＆＃13;

.blockHead:after {
  color: #4D81BF;
  border-left: 20px solid;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  display: inline-block;
  content: '';
  position: absolute;
  right: -20px;
  top: 0;
}
.blockHead {
  background-color: #4D81BF;
  /*width: 150px; */
  height: 40px;
  line-height: 40px;
  display: inline-block;
  position: relative;
}
.blocktext {
  color: white;
  font-weight: bold;
  padding-left: 10px;
  font-family: Arial;
  font-size: 11;
}

＆＃13;

<div class="blockHead"><span class="blocktext">ABC Team</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以在line-height元素上使用vertical-align和span。

.blockHead:after {
  color:#4D81BF;
  border-left: 20px solid;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  display: inline-block;
  content: '';
  position: absolute;
  right: -20px;

}
.blockHead {
  background-color:#4D81BF;
  /*width: 150px; */
  height: 40px;
  display: inline-block;
  position: relative;
}
.blocktext{
  color:white;
  font-weight:bold;
  padding-left:10px;
  font-family:Arial;
  font-size:11;
  line-height: 40px;
  vertical-align: middle;
}

<div class="blockHead"><span class="blocktext">ABC Team</span></div>

Answer 3

小鸡出来，如果我没有错，那么你需要这个吗？ click
只需将line-height提交给.blocktext
或
您也可以提供vertical-align:middle

Answer 4

以下代码的这一重要部分是.blockHead的最后3条规则，display: flex，justify-content: center（我假设您希望水平居中）和{{1} }。

align-items: center

该链接是上述代码呈现的屏幕截图。

http://i.stack.imgur.com/5X9hP.jpg

如果您想要在按钮中添加多行文字以及是否要更改尺寸，此解决方案将进行缩放。