Question

我无法将一个div的内容集中在另一个div中，因为内容不会出现。

#searchbkg {
  postition: relative;
  width: 100%;
  height: 700px;
  background-color: #85e085;
}
#searchcentre {
  position: absolute;
  width: 50%;
  margin: 0 auto;
}

<div id="searchbkg">
  <div id="searchcentre">Test</div>
</div>

出现绿框但内部没有文字。

Answer 1

您的文字看起来很好，但由于您在内部div上有position: absolute;，因此无法居中。将其更改为position: relative;，它将水平居中。如果您需要将文本置于div中心，您还可以应用text-align: center;。

＆＃13;

#searchbkg {
  position: relative;
  width: 100%;
  height: 700px;
  background-color: #85e085;
}
#searchcentre {
  position: relative;
  width: 50%;
  margin: 0 auto;
  text-align: center;
  border: 1px solid red;
}

＆＃13;

<div id="searchbkg">
  <div id="searchcentre">This is a centered div!</div>
</div>

＆＃13;

Answer 2

您需要进行以下3项更改才能将您的内容置于中心位置;

您在#searchbkg的样式中的一个css属性中输入了拼写错误。有postition，position。{/ li>
如果不需要，请从position: absolute移除#searchcentre（仅当您想要将一个元素放在另一个元素上时才应使用绝对定位）。
在text-align: center。

#searchcentre

＆＃13;

#searchbkg{
  position: relative;
  width: 100%;
  height: 700px;
  background-color: #85e085;
}

#searchcentre{
  text-align: center;
  background: orange;
  width: 50%;
  margin: 0 auto;
}

＆＃13;

<div id="searchbkg">
  <div id="searchcentre">Test</div>
</div>

＆＃13;

Answer 3

试试这个：

＆＃13;

#searchbkg{
  postition: relative;
  width: 100%;
  height: 700px;
  background-color: #85e085;
  text-align:center;
}

#searchcentre{
  display: inline-block;
  width: 50%;
}

＆＃13;

<div id="searchbkg">
    <div id="searchcentre">Test</div>
  </div>

＆＃13;

中心div在另一个里面

3 个答案: