Question

我需要一些帮助。我附上了一个基本的HTML代码。有2个矩形。 id为＆＃34; maindiv＆＃34;的主矩形另一个带有id＆＃34; subdiv＆＃34;的矩形。＆＃34;细分＆＃34;位于＆＃34; maindiv＆＃34;的中心。现在，当我将文本添加到＆＃34; subdiv＆＃34;时，它会向下移动一点并且＆＃34;细分＆＃34;不在＆＃34; maindiv＆＃34;的中心。了。我该怎么做：

将文本放在＆＃34; subdiv＆＃34;。
记住1，我得到了＆＃34;细分＆＃34;在＆＃34; maindiv＆＃34;的中心。

JSFiddle (Without adding text)

JSFiddle (After adding text)

完整代码：

＆＃13;

p {
  color: white;
}
#maindiv {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#subdiv {
  position: relative;
  margin: auto;
  top: 30%;
  width: 60%;
  height: 40%;
  background-color: brown;
  text-align: center;
}
.rectangle {
  height: 200px;
  width: 300px;
  background-color: yellowgreen;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="maindiv" class="rectangle">
    <div id="subdiv" class="rectangle">
      <p>Rectangle</p>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

默认情况下，浏览器会为p标记添加边距，并使用margin:0删除，但不会发生：

p {
  color: white;
  margin: 0;
}

#maindiv {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#subdiv {
  position: relative;
  margin: auto;
  top: 30%;
  width: 60%;
  height: 40%;
  background-color: brown;
  text-align: center;
}

.rectangle {
  height: 200px;
  width: 300px;
  background-color: yellowgreen;
}

<body>
  <div id="maindiv" class="rectangle">
    <div id="subdiv" class="rectangle">
      <p>
        Rectangle
      </p>
    </div>
  </div>
</body>

Answer 2

请将以下样式应用于您的细分，因此您的文字也将位于中心位置以及您的细分。

#subdiv{
position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 45px;
    width: 60%;
    height: 40%;
    background-color: brown;
    text-align: center;

}

Answer 3

<!DOCTYPE html>
<html>
    <head>
        <style>
            p{
                color: white;
            }
            #maindiv{
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }

            #subdiv{
                position: relative;
                margin: auto;
                top: 30%;
                width: 60%;
                height: 40%;
                background-color: brown;
                text-align: center;
            }

            .rectangle{
                height: 200px;
                width: 300px;
                background-color: yellowgreen;
            }
          .rectangle p {margin: 0px;}

        </style>
    </head>
    <body>
        <div id="maindiv" class="rectangle">
            <div id="subdiv" class="rectangle">
                <p>Rectangle</p>
            </div>
        </div>
    </body>
</html>

Answer 4

对您的display:inline代码使用 <p> ，它可以正常使用

p {
  color: white;
  display:inline;
}
#maindiv {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#subdiv {
  position: relative;
  margin: auto;
  top: 30%;
  width: 60%;
  height: 40%;
  background-color: brown;
  text-align: center;
}
.rectangle {
  height: 200px;
  width: 300px;
  background-color: yellowgreen;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="maindiv" class="rectangle">
    <div id="subdiv" class="rectangle">
      <p>Rectangle</p>
    </div>
  </div>
</body>

</html>

Answer 5

这只是因为<p>标记采用默认边距。删除它添加在CSS

p
{
margin:0;
}

Answer 6

尝试使用段落元素的line-height属性，我希望这能帮到您.. 以下是更新后的代码：Here [https://jsfiddle.net/6ua2vyhy/]。

将文本添加到div，移动div

6 个答案: