我正在制作一个Web图形用户界面，我想添加一个关闭按钮，但问题是:它居中.
以下是CSS的一部分:
.modmenu-container {
text-align: center;
}
.close-btn {
top:0;
right:0;
float:right;
}
我正在制作一个Web图形用户界面，我想添加一个关闭按钮，但问题是:它居中.
以下是CSS的一部分:
.modmenu-container {
text-align: center;
}
.close-btn {
top:0;
right:0;
float:right;
}
首先，属性Top、Right、Bottom和Left只能在位置不是静态的情况下使用.静态是每个元素的默认位置，但是，您可以使用position属性更改它.这有时会把事情搞得一团糟，所以要解决这个问题，我们可以将父代(.modmenu-container)的位置设置为Relative.然后，我们可以将按钮的位置设置为绝对位置，并将其放置在右上角.
.modmenu-container {
position: relative;
border: 1px solid rgba(0, 0, 0, 0.125); /* For demonstration */
padding: 1em; /* Demonstration */
width: 40vw; /* Demonstration */
height: 40vh; /* Demonstration */
text-align: center;
}
.close-btn {
position: absolute;
top: 0;
right: 0;
/* Demonstration */
cursor: pointer;
background: red;
color: white;
outline: none;
border: none;
}<div class="modmenu-container">
<button class="close-btn">
×
</button>
Content here
</div>