html - 集中分离 h 标签和 p 标签

Question

我想集中对齐 h 标签和 p 标签，但我似乎无法很好地将这些部分分开。 Here is the preview of what happens

我想要的是在三个信息“框”之间留出空间，并使所有内容都处于中心位置。我试图在 .top-row 类之间添加填充，但它似乎总是粘在一起。

HTML:

<section>
      <div class="container">
        <h1>TOPICS COVERED</h1>
        <p id=intro-p>There are six essential parts to building a CPU, let's
        go through them briefly</p>
      <div class="top-row">
        <div class="box1">
        <h3>BINAY & LOGIC</h3>
        <p>Before all, one needs to be comfortable with lab material & binary logic</p>
     </div>
     <div class="box2">
        <h3>Timing Signal Generator</h3>
        <p>The timing signal generator for the computer is a clock with a cycle that
        repeats. It allows the computer the amount of time needed to permorm operations.</p>
      </div>
      <div class="box3">
        <h3>Bus, Arithmetic Unit & Program Counter</h3>
        <p>In order to efficiently spread data throughout the breadboard, the data can be spread in a bus.
        he program counter of a computer holds the location of an execution to be executed.</p>
      </div>
    </div>
    <div class="bottom-row">

    </div>
  </div>
</section>

CSS:

#topics{
 padding: 25px;
 background-color: #f5f6fa;
}

#topics h1{
 font-size: 30px;
 font-weight: 400px;
 letter-spacing: 2.5px;
 text-align: center;
 color: #282828;
}

#intro-p {
 text-align: center;
 color: #282828;
 font-size: 20px;
 letter-spacing: 2.5px;
}

.top-row{
 display: flex;
}

 .top-row h3{
 padding-left: 0px;
 text-transform: uppercase;
 }

.top-row p{
 text-align: justify;
 color: #282828;
 font-size: 14px;
 letter-spacing: 0.5px;
 }

Answer 1

顶行只会填充整个容器。你想要做的是填充顶行的 child 。您可以通过选择它们并添加填充来做到这一点。此外，由于您使用的是 flexbox，因此您可以为它们添加 flex 以选择它们如何收缩、增长以及它们的基本尺寸。这样的事情对你有用。 text-align center 只会将标题居中，因为段落标签在它们上面对齐。如果您希望它们居中，则将其删除。此外，flex-basis，flex 上的第三个数字，如果您不希望它们相等，也可以设置为 auto 或 unset。在此处查找有关 flexbox 的更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.top-row > div {
    padding: 20px;
    text-align: center;
    flex: 1 1 33%;
}