Question

我是新手，我正在试图弄清楚我做错了什么。我想把一切都集中在一个div中，但无论我做什么，它都不会让步。

你们可以提出建议吗？

<div id="main1">
<h1>blah</h1>
    <div id="intro">
        <p>Bettina is a designer who is learning to code. She is very cluey and a bit fustrated because she doesn't know what she is doing.</p>
    </div><!--intro-->

#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;}

#title {
position:absolute;
top:500px;
right:auto;
margin:auto;
}

#intro {
bottom:0px;
width:50%;
margin:0 auto;
position:absolute;
text-align:center;
}

Answer 1

将text-align:center;添加到<h1>，使其居中。另外，从position:absolute;移除#intro，使其文字居中。

工作代码段：

＆＃13;

#main1 {
  width:100%;
  height:700px;
  margin:0;
  position:relative;
  background-color:#CCC;
}

#main1 h1{
  text-align:center;
}

#title {
  position:absolute;
  top:500px;
  right:auto;
  margin:auto;
}

#intro{
  bottom:0px;
  width:50%;
  margin:0 auto;
  /*position:absolute;*/
  text-align:center;
}

＆＃13;

<div id="main1">
  <h1>blah</h1>
  <div id="intro">
    <p>Bettina is a designer who is learning to code. She is very cluey and a bit fustrated because she doesn't know what she is doing.</p>
  </div><!--intro-->
</div><!--main1-->

＆＃13;

Answer 2

您可以让父DIV（＃main1）首先获得居中对齐。因此，它下面的元素被移动到中心。 Als也对intro div（#intro）进行了更改，使其居中并低于标题。

    #main1 {
    width:100%;
    height:700px;
    margin:0;
    position:relative;
    background-color:#CCC;
    text-align:center;
    }

    #intro {
    margin: auto;
    width:50%;
    text-align:center;
    }

Answer 3

居中实质上意味着认识到text-align:center应该保留用于居中文本，因此它适用于H1标签或P标签。对于DIV来说，如果你使用边距和宽度样式，你通常可以强迫DIV居中。如果您遇到问题，请查看您是否已将position:absolute应用于DIV，并将其删除或将其更改为position:relative或是否适合position:static。这里有一些代码，我建议将文本垂直和水平居中，如下所示：

#main1 {
margin: auto;
width:100%;
height:600px;
background-color:#eee;
}
#main1 h1 {
    padding-top:33%;
    text-align:center;
}
#intro {
bottom:0px;
width:33%;
min-width:90px;    
margin:auto;
background:#fff; 
padding:32px;
}
#intro p {
 text-align:justify;

}

注意：我改变了高度，以便您可以更好地在现场演示中看到结果;见下面的链接。

我基本上使用HTML提供和使用类似字数的文本。 CSS以包含段落的DIV为中心。 P标签的CSS给出了居中文本的错觉，而没有实际应用text-align: center，以防止每行文本居中，这在阅读句子时可能会令人讨厌。

<div id="main1">
<h1>Centered</h1>
    <div id="intro">
        <p>Centering can be a lot of fun or it can lead to much frustration.  It all depends.  Sometimes it's a challenge and sometimes it's just what it is.</p>
    </div><!--intro-->

现场演示here

Answer 4

感谢您的所有建议！这就是我最终做的事情：

#main1 {
width:100%;
height:700px;
margin:0;
background-color:#CCC;
position:relative;
}
#title {
display: block;
margin-left: auto;
margin-right: auto;
position:absolute;
top:300px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#intro {
width:50%;
text-align:center;
position:absolute;
bottom:0px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}

东西不是Div的中心

4 个答案: