Question

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

我想要的是在三个盒子之间留出空间＆＃34;信息，使一切都中心。我试图在.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

顶行只会填充整个容器。你想要做的是填充顶行的孩子。您可以通过选择它们并添加填充来实现。此外，由于您使用的是flexbox，因此可以向其添加flex以选择缩小，增长和基本大小的方式。这样的东西对你有用。文本对齐中心只会将标题居中，因为段落标记对它们有正当理由。如果您希望它们居中，那么删除它。此外，如果您不希望它们相等，也可以将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%;
}

分离h标签＆amp; p标签集中

1 个答案: