If <p>标签位置是绝对的div连续出现，但在评论绝对位置之后div下降，即使position:relative。谁能告诉我为什么会发生这种情况？
*,
*::before,
*::after {
box-sizing: border-box;
}
.main-content {
background: linear-gradient(150deg, #be6180, #973f5c, #64293d);
width: 100%;
height: 200px;
border-radius: 0.5em;
padding: 25px;
}
.card-content {
background: linear-gradient(150deg, #f3c83b, #dfa72e, #e24428);
width: 100px;
height: 100px;
border-radius: 0.5em;
display: inline-block;
margin-right: 25px;
}
p {
/*position: absolute;*/
}
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div class="main-content">
<div class="card-content"><p>This is my page</p></div>
<div class="card-content"><p>This is my page</p></div>
<div class="card-content"></div>
</div>
</body>
</html>
要将元素居中，您可以使用vertical-align.
以下值可以解决您的问题：vertical-align: middle;, vertical-align: bottom;, vertical-align: top;, vertical-align: text-bottom;, vertical-align: text-top;,
这是代码（我添加了vertical-align: middle给你的card-content):
*,
*::before,
*::after {
box-sizing: border-box;
}
.main-content {
background: linear-gradient(150deg, #be6180, #973f5c, #64293d);
width: 100%;
height: 200px;
border-radius: 0.5em;
padding: 25px;
}
.card-content {
background: linear-gradient(150deg, #f3c83b, #dfa72e, #e24428);
width: 100px;
height: 100px;
border-radius: 0.5em;
display: inline-block;
margin-right: 25px;
vertical-align: middle; /* Also possible: Bottom, top, text-bottom and text-top */
}
p {
/*position: absolute;*/
}
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div class="main-content">
<div class="card-content"><p>This is my page</p></div>
<div class="card-content"><p>This is my page</p></div>
<div class="card-content"></div>
</div>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
