Question

我正在制作一个占据整个屏幕的div。我正在使用flexbox将内容居中放在屏幕中间。但是，当我尝试使用<b>标记使其变为粗体时，它将删除它前面的空白，并且当我使用<br />使文本移至下一行时，它将不起作用。

要在其中获得空间，我用 代替了空间。这行得通，但是为什么没有这个就删除空间呢？ <br />问题仍然存在。

这是我的代码的链接：https://codepen.io/kadhirumasankar/pen/xowLEv

#header-container {
  background-color: #374457;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 4em;
}

<div id="header-container">
  Hi, I&#39;m <b>Name</b><br /> Student at <b>University</b>
</div>

我认为问题可能与我的flexbox有关，因为除此之外，它似乎应该可以工作，但是不可行。

Answer 1

所有带有flex框的东西都会被弯曲，处理此问题的最佳方法是在flex框中放置一个用于文本的容器。在下面看看。

#header-container{
  background-color: #374457;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
}

<div id="header-container">
<div>
  Hi, I&#39;m <b>Name</b><br />
  Student at <b>University</b>
  </div>
</div>

Answer 2

如何删除.css文件中与flexbox有关的那三行，然后替换为：

    display: inline-block;
    text-align: center;

将段落标签放在.html文件的每一行周围，如下所示：

      <div id="header-container">
          <p>Hi, I'm <b>Name</b></p>
          <p><b>Student</b> at University</p>
      </div>

要回答另一个问题：是的，这是由于flex-box造成的。由于div中包含文本，实体和标签的组合，因此根据您的规范，flex-box会将它们全部布置为DOM中的单独元素。这将删除您要创建的所有格式。

为什么我的HTML标签会删除前面的空格，为什么换行符在这里不起作用？

2 个答案: