儿童箱在Safari 9中没有垂直居中

Question

在以下代码段中，.inner1和.inner2并非严格垂直居中于.outer。我使用过Safari的内置网络检查器，但我发现盒子之间没有边距。

.outer {
  display: inline-block;
  border: 1px solid silver;
}
.inner {
  display: inline-block;
  margin: 0;
  width: 50px;
  height: 10px;
}
.inner1 {
  border: 1px solid yellow;
}
.inner2 {
  border: 1px solid blue;
}

<div class="outer">
  <span class="inner inner1"></span>
  <span class="inner inner2"></span>
</div>

什么能阻止盒子相互接触，我该如何解决？

我正在使用Safari 9.1.2

Answer 1

apt-get update元素上有空格，删除它的一种方法是删除元素之间inline-block中的空格。

HTML

.outer {
  display: inline-block;
  border: 1px solid silver;
}
.inner {
  display: inline-block;
  margin: 0;
  width: 50px;
  height: 10px;
}
.inner1 {
  border: 1px solid green;
}
.inner2 {
  border: 1px solid blue;
}

您还可以使用<div class="outer"> <span class="inner inner1"></span><span class="inner inner2"></span> </div>删除空格并获取Flexbox个子元素。

vertical-align

.outer {
  border: 1px solid silver;
  display: inline-flex;
  align-items: center;
}
.inner {
  margin: 0;
  width: 50px;
  height: 10px;
}
.inner1 {
  border: 1px solid green;
}
.inner2 {
  border: 1px solid blue;
}

Answer 2

您可以使用flexbox：

＆＃13;

＆＃13;

.outer {
  display: inline-flex;
  border: 1px solid silver;
  height:25px;
  align-items: center;
}
.inner {
  display: inline-block;
  margin: 0;
  width: 50px;
  height: 10px;
  vertical-align:middle;
}
.inner1 {
  border: 1px solid yellow;
}
.inner2 {
  border: 1px solid blue;
}

＆＃13;

<div class="outer">
  <span class="inner inner1"></span><span class="inner inner2"></span>
</div>

＆＃13;

＆＃13;

＆＃13;