Question

我试图将我的段落集中在一起，但是最糟糕的时间是尝试这样做：

.centerLoginForm {
  display: flex;
  justify-content: center;
}

.mainContent {
  position: relative;
  color: white;
  width: 60%;
  padding: 1.5% 2.5% 0 2.5%;
  margin-top: 5%;
  background-color: black;
  border-radius: 5% 5% 5% 5%;
}

.underHead,
.underHead p {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.underHead {
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

<div class='centerLoginForm'>
  <section class='mainContent'>
    <h1>Welcome to the BYU Idaho Radio Intranet!</h1>
    <div class='underHead'>
      <p>Computers and computer networks are a funny thing. We interact with them mostly through the internet, which is just a whole bunch of interconnected computers around the world. Well this is an <i>intranet</i>: a local network just like the internet,
        only with fewer connected computers.</p>

      <p>The purpose of this intranet is to guide through troubleshooting, monitoring critical systems, and station documentation. This site is easy to navigate and you should find all the things you are looking for just by following the navigation links.</p>

      <p>This was built to be a living, breathing application. Some dude originally built this, but he welcomes support, ideas, and if somebody wanted to chip in on developing, he would love that too! So please, if you have ideas, thoughts, or skills, share
        them! Engineering unfortunately is having fewer and fewer people enter into its field, and needs as many bright minds as it can take and you have a bright mind!</p>
    </div>
  </section>
</div>

正如您所看到的，<p>标记内的文字是遵循它的自然位置，而不是跟随我在课程.underHead中的内容。我已经尝试了text-align，content-align，justify-content，而我无法找到一种方法来集中这些内容。

Answer 1

我认为这就是你要做的事情：

＆＃13;

.centerLoginForm {
  display: flex;
  justify-content: center;
}

.mainContent {
  position: relative;
  color: white;
  width: 60%;
  padding: 1.5% 2.5% 0 2.5%;
  margin-top: 5%;
  background-color: black;
  border-radius: 5% 5% 5% 5%;
}

.underHead {
  display: block;
  margin: auto;
  width: 70%;
  text-align: center;
}

＆＃13;

<div class='centerLoginForm'>
  <section class='mainContent'>
    <h1>Welcome to the BYU Idaho Radio Intranet!</h1>
    <div class='underHead'>
      <p>Computers and computer networks are a funny thing. We interact with them mostly through the internet, which is just a whole bunch of interconnected computers around the world. Well this is an <i>intranet</i>: a local network just like the internet,
        only with fewer connected computers.</p>

      <p>The purpose of this intranet is to guide through troubleshooting, monitoring critical systems, and station documentation. This site is easy to navigate and you should find all the things you are looking for just by following the navigation links.</p>

      <p>This was built to be a living, breathing application. Some dude originally built this, but he welcomes support, ideas, and if somebody wanted to chip in on developing, he would love that too! So please, if you have ideas, thoughts, or skills, share
        them! Engineering unfortunately is having fewer and fewer people enter into its field, and needs as many bright minds as it can take and you have a bright mind!</p>
    </div>
  </section>

</div>

＆＃13;

无法居中<p>嵌套在2个div和

1 个答案: