Question

如何在另一个宽度为100％的div内水平居中一个div？

＆＃13;

#conteudo{
  padding-top: 30px;
  width: 100%;
  background: #fff7db url(../_img/content-border.jpg) repeat-x ;
  min-height: 1080px;
  padding-bottom: 10px;
}

#principal{
  width: 50%;
  margin: 0 auto;
}

＆＃13;

<div id="conteudo">
    <section id="principal">
      <img src="_img/summer-nymph.png" alt="summer-nymph.png">

        <p>
          Nullam sed magna mattis, posuere enim nec, fermentum risus.
          Aenean diam massa, condimentum id urna in, porta laoreet tortor.
          Duis tempus vitae risus nec hendrerit. Fusce euismod ligula id erat dignissim,
          nec viverra ante condimentum. Phasellus sollicitudin tincidunt lectus id luctus.
        </p>
    </section>
  </div>

＆＃13;

我想将div#principal水平居中div#conteudo，但我的代码不能正常工作。

Answer 1

您当前的代码水平居中。如果你真的希望它水平居中，那么在你没有发布的代码行中肯定会出现问题。一个常见的错误是你的css文件的错误链接。我很多次都犯了这个错误，所以我建议你在HTML代码的头部检查你的CSS文件的链接标签
如果它不是你的链接标签，那么你需要发布整个代码寻求进一步的帮助。

我之前误读了这个问题（横向和纵向混淆），但我仍然希望将其留下来，因为它可能会有所帮助，它可能有所帮助你有未来的中心问题：
您还可以使用css flexbox布局模式对div进行居中
以下是它的样子片段：

＆＃13;

#conteudo {
  padding-top: 30px;
  width: 100%;
  background: #fff7db url(../_img/content-border.jpg) repeat-x ;
  min-height: 1080px;
  padding-bottom: 10px;

  /*
  Center a div horizontally and vertically with the flexbox
  If you only want it centered in one direction, just remove
  the other property
  */
  display:flex;
  justify-content:center; /* horizontal center */
  align-items:center; /* vertical center */
}

#principal{
  width: 50%;
}

＆＃13;

<div id="conteudo">
    <section id="principal">
      <img src="_img/summer-nymph.png" alt="summer-nymph.png">

      <p>
        Nullam sed magna mattis, posuere enim nec, fermentum risus.
        Aenean diam massa, condimentum id urna in, porta laoreet tortor.
        Duis tempus vitae risus nec hendrerit. Fusce euismod ligula id erat dignissim,
        nec viverra ante condimentum. Phasellus sollicitudin tincidunt lectus id luctus.
      </p>
      
    </section>
</div>

＆＃13;

然而，这个解决方案并不适用于非常老的浏览器（IE 9及更早版本），但几乎适用于所有现代浏览器。仍然是flexbox是一个非常好的CSS布局模式。我真的建议看看它。
您可以查看指向flexbox指南的链接： Flexbox Guide

如何将div放在另一个宽度为100％的div中？

1 个答案: