Question

我刚开始一个新项目，我遇到了一个问题。我的问题是我不能增加div标签内的段落标签的字体大小。我也有一个问题，我的段落标记居中在div的中心。

div {
  height: 50px;
  width: 50px;
  text-align: center;
}
.gases {
  background-color: limegreen;
}

<!DOCTYPE html>
<html>

<head>
  <title>The Periodic Table</title>
  <style>
  </style>
</head>

<body>
  <div class="periodOne groupOne gases" id="hydrogen">
    <p>H</p>
  </div>
</body>

</html>

Answer 1

您只需增加段落的 font-size ，然后添加 line-height 等于 {{1 将其垂直居中。

<强>代码：

div

/* ----- CSS ----- */
div {
  height: 50px;
  width: 50px;
  text-align: center;
}
.gases {
  background-color: limegreen;
}
#paragraph {
  font-size: 30px;
  line-height: 50px;
}

Answer 2

您可以将类添加到p标签，然后给出font-size，

.paragraph {
   font-size: 15px;
}

您可以将文本垂直居中于div，

.gases {
    display: flex;
    align-items: center;
}

您还可以通过添加

水平居中内容

justify-content: center;

Answer 3

您可以直接设置标签的样式，但请注意，这是一个全局变化。

   div p {
        text-align: center;
        font-size: 1.3em;
        width: 100%;
    }

Answer 4

问题1： - 我无法增加div标签内的段落标记的字体大小

解决方案1 - ＆gt;为段落标记创建id并在其上应用font-size。

解决方案2 - ＆GT;只需编写

即可直接更改大小

p{
   font-size:32px;
 }

但最佳方法是使用id，因此可以唯一地识别此段落。

问题2： - 我也有问题让我的段落标记居中在div的中心

div {
   height: 50px;
    width: 50px;
    text-align: center;
 }

您已编写此代码。在此代码中，您将文本对齐中心提供给div。所以它会发送任何东西到中心，这将在这个div内（不仅这个div在这个页面的每个div）

解决方案1 - ＆gt;您可以删除此css属性

解决方案2 - ＆GT;你也可以写这个来回到原来的地方

  p{
       text-align:left;
    }

整个解决方案

    <!--HTML-->
    <div class="periodOne groupOne gases" id="hydrogen">
       <p id="increaseFont">That's how you can incrrease font man</p>
    </div>



//css 
div {
    height: 50px;
    width: 50px;
    text-align: center;
 }
.gases {
    background-color: limegreen;
 }
 #increaseFont{
     font-size:23px;
  }
  p{
      text-align:left;
   }

Answer 5

另一种方式....而不是添加另一个id标签，你可以使用它..

hydrogen>p{
  font-size: 30px;
  line-height: 50px;
}

两种方式都可以正常工作，但这样可以保持HTML清洁

如何在div标签内更改段落标签的字体大小？

5 个答案: