Question

如果单击我的 header （下面的jsfiddle），则一个新的div将向下滑动，其中包含文本，如果单击 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>

为了使它们垂直居中，我尝试过：

使用柔性显示并设置行高
添加边距和填充以平衡距离
将两者都设置为特定高度

Answer 1

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

或者，在容器上使用display: flex和align-items: center也可以达到同样的效果。

Answer 2

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

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

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

在两个内联块div中垂直居中放置文本

2 个答案: