Question

当我将我的内联块元素（14x14px）放在单行行（高度和行高= 20px）时，它不会发生在它的父级（垂直）中间。 Line-height problem picture

HTML

<div class="status status_success"> Success</div>
<div class="status status_busy"> Busy</div>
<div class="status status_missed"> Missed</div>

CSS

body {
  font-size: 16px;
  line-height: 20px;
}

.status {
  position: relative;
  display: block;
  white-space: nowrap;
  border: 1px solid #000; // block border for helping test
  margin: 0 0 20px;

  &:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    background-color: #d6d6d6;
    border-radius: 50%;
  }
}

请告诉我，为什么会这样？

Answer 1

vertical-align: middle将元素的中间与父级中的小写字母中间对齐，这仅表示垂直对齐不是将元素放在其父级的正中间的100％精确方式。

Src：https://css-tricks.com/almanac/properties/v/vertical-align/

在下面的示例中，我添加了一个包装器（以及2：nd样本中的跨度，字体大小与伪大小相匹配），以显示它们如何相互作用以及如何使结果看起来如此更好。

注意：根据＆＃34; Vangel Tzo＆＃34;的建议，flex是改善工作的一种方式。

＆＃13;

.wrap {
  padding: 20px;
  font-size: 16px;
  font-family: "helveticaneuecyr", Arial, sans-serif;
  line-height: 20px;
}

.status {
  position: relative;
  white-space: nowrap;
  border: 1px solid #000;
  margin: 0 0 20px;
}
.status:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  background-color: #d6d6d6;
  border-radius: 50%;
}
.status_success:before {
  background-color: #3ad994;
}
.status_missed:before {
  background-color: #e83e3e;
}
.status_busy:before {
  background-color: #f5be48;
}
.status span {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
}

＆＃13;

<div class="wrap"> 
  <div class="status status_success"> Success</div>
  <div class="status status_busy"> Busy</div>
  <div class="status status_missed"> Missed</div>
</div>
<div class="wrap"> 
  <div class="status status_success"> <span>Success</span></div>
  <div class="status status_busy"> <span>Busy</span></div>
  <div class="status status_missed"> <span>Missed</span></div>
</div>

＆＃13;

Answer 2

您可以将display: flex用于父元素（.status）和align-self: center属性以使其垂直居中。

  .status {
    position: relative;
    white-space: nowrap;
    border: 1px solid #000;
    margin: 0 0 20px;
    display: flex;
  }

  .status:before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    align-self: center;
    background-color: #d6d6d6;
    border-radius: 50%;
  }

示例：http://codepen.io/srekoble/pen/BKWJgx

Answer 3

作为@LGSon解释，vertical-align不是一个神奇的CSS，它的行为永远不会被我信任。因此，我建议另一种方法以您想要的方式对齐元素。因为您已将position:relative放在.status中，我建议您使用position:absolute为生成的内容设置样式，并且每个浏览器之间的格式更加一致。

codepen示例：http://codepen.io/thovo/pen/MypQbW

Answer 4

尝试以下代码为horizontaly中心代码。

body { font-size: 16px; line-height: 20px; text-align:center;}
.status { float:none; position: relative; display:inline-block; white-space: nowrap; border: 1px solid #000; // block border for helping test margin: 0 0 20px;}

尝试下面的verticaly中心代码代码。

.status { display:table: width:100%; float:none; position: relative; display:inline-block; white-space: nowrap; border: 1px solid #000; // block border for helping test margin: 0 0 20px;}
.status:before { display:table-cell; vertical-align: middle;}

为什么内联块元素位置在一行中具有错误的垂直位置

4 个答案: