html - 垂直居中适用于一个元素但不适用于另一个元素

Question

我试图将黄色 div 垂直放置在绿色区域的中央，但它不起作用。结构完全相同并使用 mongoDB 文本，所以不知道为什么它不起作用。

1. 如何让黄色的 div 在绿色区域垂直居中？

2. 此外，我希望两个文本之间的红线(边框)为一半大小 - 是否有设置边框高度的规则？

感谢帮助，谢谢

#header-title-wrap {
  margin-right: 10px;
  padding-right: 10px;
  background: #0ff;
  width: auto;
  height: auto;
  float: left;
  border-right: 1px solid #f00;
  /* the below aligns the divs centrally (vertically & horizontally) */
  display: flex;
  justify-content: center;
  align-items: center;
}

#header-slogan-wrap {
  background: #ff0;
  width: auto;
  height: auto;
  float: left;
  /* the below aligns the divs centrally (vertically & horizontally) */
  display: flex;
  justify-content: center;
  align-items: center;
}

#header-text-wrap {
  width: auto;
  height: auto;
  text-align: justify;
  float: left;
  background: #0f0;
}

#t1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 100;
  text-transform: none;
  color: #000;
  font-size: 24px;
}

#t1-emphasis {
  color: #2778BA;
  font-size: 27px;
  font-weight: 700px;
}

#slogan {
  font-family: 'Open Sans', sans-serif;
  font-weight: 100;
  text-transform: uppercase;
  font-size: 12px;
  color: #666;
}

<div id="header-text-wrap">

  <div id="header-title-wrap">
    <span id="t1">mongo<span id="t1-emphasis">DB</span></span>
  </div>

  <div id="header-slogan-wrap">
    <span id="slogan">Slogan text here</span>
  </div>

</div>

Answer 1

How can I get the yellow div to be vertically centered in the green area?

您需要设置明确的高度以使布局在您当前的代码结构中工作。

但既然您已经在某些元素上使用了 flexbox，为什么不在主容器上也使用它呢？这将为您提供许多强大的对齐选项，并且您无需设置明确的高度。

Also I would like the red line (border) between the two texts to be half the size - is there a rule that sets the border height?

考虑一个绝对定位的伪元素而不是边框​​。

这是您的代码的修订版:

#header-text-wrap {
  display: inline-flex; /* primary flex container */
  background: #0f0;
}

#header-title-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 10px;
  margin-right: 10px;
  background: #0ff;
  position: relative; /* sets container for absolutely positioned pseudo element */
}

#header-title-wrap::after {
  content: "";
  position: absolute;
  height: 50%;
  width: 2px;
  right: 0;
  background-color: red;
}

#header-slogan-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  background: #ff0;
}

#t1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 100;
  text-transform: none;
  color: #000;
  font-size: 24px;
}

#t1-emphasis {
  color: #2778BA;
  font-size: 27px;
  font-weight: 700px;
}

#slogan {
  font-family: 'Open Sans', sans-serif;
  font-weight: 100;
  text-transform: uppercase;
  font-size: 12px;
  color: #666;
}

<div id="header-text-wrap">
  <div id="header-title-wrap">
    <span id="t1">mongo<span id="t1-emphasis">DB</span></span>
  </div>
  <div id="header-slogan-wrap">
    <span id="slogan">Slogan text here</span>
  </div>
</div>