垂直中心文字在两个内联块Div中

Question

如果单击我的 header （下面的jsfiddle），则新的div将在其中滑动，如果您单击 close close close 按钮，它将关闭。我的问题是标题和关闭按钮不在同一条线上，或者在边界和元素之间存在不必要或不相等的空间。（也许是因为它们没有相同的字体尺寸？）

jsfiddle：https：//jsfiddle.net/0hgo69s1/Chrome检查员：https：//prnt.sc/mob4t7

.con {
  width: 40%;
  color: black;
  border: 1px solid black;
  transition: ease all 0.2s;
}
.con:hover {
  border: 1px solid limegreen;
}
.header,
.close {
  display: inline-block;
  text-align: center;
  cursor: pointer;
}
.header {
  width: 90%;
  color: black;
  font-size: 14px;
  text-transform: uppercase;
  font-family: 'Open Sans';
}
.close {
  width: 10%;
  color: black;
  font-size: 18px;
  font-family: 'Open Sans';
}
.close:hover {
  color: red;
}

<div class="con"><!--
   --><div onclick='alert("open")' class="header">HEADER</div><!--
   --><div onclick='alert("close")' class="close">&times;</div><!--
 --></div>

为了垂直居中，我尝试了：

• 使用Flex显示器和设置线高，
• 增加边距和填充以均衡距离
• 将特定高度设置为

Answer 1

.header和 .closedivs分别具有不同的字体大小（18px）和（14px）。如果您在两个元素上使用vertical-align: middle，则应匹配。

另外，在容器上使用display: flex和align-items: center可以实现相同的功能。

Answer 2

将这两行添加到您的.con元素

.con {
   display: flex;
   align-items: center;
}

https://jsfiddle.net/fcqmkxe2/6/