Question

我正在尝试将黄色div垂直放置在绿色区域的中央，但它无法正常工作。结构完全相同并且使用mongoDB文本，因此不知道为什么它不起作用。

如何让黄色div在绿色区域垂直居中？
此外，我希望两个文本之间的红线（边框）是一半大小 - 是否有设置边框高度的规则？

感谢帮助，谢谢

#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

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

您需要设置一个显式高度，以使布局在您当前的代码结构中工作。

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

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

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

以下是您的代码的修订版本：

#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>

Answer 2

这里发生的是您的标语文本在#header-slogan-wrap div中垂直居中，但该div上的高度设置为auto，因此它实际上只与文本一样高。

你需要在height: 100%上设置#header-slogan-wrap，这会抛出你的背景颜色，所以给它一个透明的背景并将黄色背景直接放在#slogan后面。 / p>

您还需要在包含div上设置显式高度，而不仅仅是auto。

这应该垂直对齐你的文字。

我还建议将保证金和填充取消#header-text-wrap。提供#header-text-wrap和#header-slogan-wrap height: 100%; box-sizing: border-box; padding: 10px; - 显然可以使用适合您设计的任何值。

Answer 3

我建议从Css Tricks中检查这个tutorial，它们会显示不同的情况以及解决方法。它可以用于以后。

垂直居中适用于一个元素而不是另一个元素

3 个答案: