0

我尝试使用margin: 0 auto;水平居中的 div 元素但是我不明白为什么这些项目总是出现在 HTML 页面的左侧。

body {
    background: #f06d06;
    font-size: 80%;
}

main {
     display: inline-block;
     background: white;
     line-height: 300px;
     height: 300px;
     margin: 20px auto;
     width: 300px;
     resize: vertical;
     overflow: auto;
     vertical-align: middle;
}

div {
        display: inline-block;
        vertical-align: middle;
        height: 100px;
        line-height: 100px;
        background-color: black;
        padding: 50px;
        margin: 0 auto;
}

p {
        display: inline-block;
        vertical-align: middle;
        color: white;
        margin: 0;
        line-height: 1.5;    
}
<body> 
    <main>
        <div>
            <p>center align</p>
        </div>
    </main>
</body>

谁能告诉我我做错了什么？

4

4 回答 4

0

将 text-align:center 设置为 main。

main{
display: inline-block;
background: white;
line-height: 300px;
height: 300px;
width: 300px;
resize: vertical;
overflow: auto;
vertical-align: middle;
text-align:center;
}
于 2021-12-19T03:30:12.657 回答
0

你必须实现一个flexbox或Grid来实现垂直和水平居中！在这里，我对您的代码进行了一些更新

body {
    background: #f06d06;
    font-size: 80%;
}

main {
     display: block;
     background: white;
     line-height: 300px;
     height: 300px;
     margin: 20px auto;
     width: 300px;
     resize: vertical;
     overflow: auto;
     vertical-align: middle;
     margin:auto;
     overflow:hidden;
}

div {
        display: inline-block;
        vertical-align: middle;
        height: 100px;
        line-height: 100px;
        background-color: black;
        margin: 0 auto;
        text-align:center;
        width:100%;
}

p {
        display: inline-block;
        vertical-align: middle;
        color: white;
        margin: 0;
        line-height: 1.5;    
        text-align:center;
}
<body> 
    <main>
        <div>
            <p>center align</p>
        </div>
    </main>
</body>

于 2021-12-19T04:16:31.053 回答
0

试试这个，我改变了 div 显示属性

body {
    background: #f06d06;
    font-size: 80%;
}

main {
     display: inline-block;
     background: white;
     line-height: 300px;
     height: 300px;
     margin: 20px auto;
     width: 300px;
     resize: vertical;
     overflow: auto;
     vertical-align: middle;
}

div {
        display: block;
        vertical-align: middle;
        height: 100px;
        width: 100px;
        line-height: 100px;
        background-color: black;
        padding: 50px;
        margin: 0 auto;
}

p {
        display: inline-block;
        vertical-align: middle;
        color: white;
        margin: 0;
        line-height: 1.5;    
}
<body> 
    <main>
        <div>
            <p>center align</p>
        </div>
    </main>
</body>

于 2021-12-19T03:45:05.687 回答
0 

body {
    background: #f06d06;
    font-size: 80%;
}

main {
     display: block;
     background: white;
     line-height: 300px;
     height: 300px;
     margin: 20px auto;
     width: 300px;
     resize: vertical;
     overflow: auto;
     vertical-align: middle;
}

div {
        display: block;
        vertical-align: middle;
        height: 100px;
        width: 100px;
        line-height: 100px;
        background-color: black;
        padding: 50px;
        margin: 0 auto;
}

p {
        display: block;
        vertical-align: middle;
        color: white;
        margin: 0;
        line-height: 1.5;    
}
<body>
  <main>
    <div>
      <p>Center div</p>
    </div>
  </main>
</body>

好的，让我解释一下这里发生了什么，你在你的帖子中添加了我改为块的显示内联块，这意味着一个特定的元素main将占据整个水平空间，并且当你使用margin: auto它时会自动给予相等的边距双方，它正在处理您的代码，但问题是您尚未将宽度指定为最大。

因此，每当您想使用 使元素居中时margin: auto，都需要将宽度指定为100vhor 100%（如果父 div 有100vh）

于 2021-12-19T04:09:04.293 回答