Question

我正在尝试将一个具有标题和文本的div居中放置在另一个div中，但是它不起作用。它只是一直向右倾斜，这不是我想要的那样。怎么了？

CSS：

body {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    background-color: #9C5B27;
}
.about {
    position: static;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
    width: 543px;
    text-align: center;
}
header {
    text-align: center;
}
article {
    color: #FFFFFF;
    margin-left: auto;
    width: 567px;
    position: absolute;
    text-align: center;
}
#content {
    background-color: #574637;
    width: 649px;
    height: 134px;
    margin: 0 auto;
    text-align: center;
}

HTML：

 <div class="about">
  <header>Home</header>
            <div id="content">
    <article>
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </article>
    </div>
</div>
</body>

Answer 1

您正在.about容器中溢出。可以通过以下方法达到预期的效果：

body {
  background-color: #9C5B27;
}

.about {
  margin: 25px auto;
  text-align: center;
}

header {
  text-align: center;
}

#content {
  width: 650px;
  padding: 16px; 
  margin: 12px auto;
  background-color: #574637;
}

article {
  color: #fff;
}

div不会在另一个div内居中

1 个答案: