html/css - 如何将关闭按钮放在圆形背景中

Question

我试图将 X 正好放在圆圈内，但出于某种原因我无法使它们相互匹配，请参见下文

html:

    <div class="messages">
    <span class="closebtn dot" onclick="this.parentElement.style.display='none';">×</span>
        {% for message in messages %}
            <span><li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li></span>
        {% endfor %}
    </div>

CSS:

.messages {
    position: sticky;
    width: 235px;
    z-index: 1;
    float: right;
    border-radius: 1px;
    margin: 0 20px;
}

.closebtn {
    color: #535353;
    font-size: 30px;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    margin: -25px 0 0 -10px;
}

.dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

Answer 1

只需在您的 .dot class

中添加这个额外的 CSS

 .dot {
     text-align: center;
     line-height: 25px;
  }

Answer 2

您可以将所有 css 放在 .closebtn 中，设置 line-height 为 25px 和 text-align 居中。

.closebtn {
    color: #535353;
    font-size: 30px;
    top: 5px;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    height: 25px;
    width: 25px;
    line-height: 25px;
    text-align: center;
    background-color: #bbb;
    border-radius: 50%;
}

<div class="messages">
    <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
    </div>

html/css - 如何将关闭按钮放在圆形背景中

html/css - how to put close button inside round background

html

css

webbrowser-control