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

Question

I'm trying to put the the X exactly inside of the circle but for some reason im not able to get them matched on each other, please see below

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;
}

question from:https://stackoverflow.com/questions/65872886/html-css-how-to-put-close-button-inside-round-background

Answer 1

You can put all the css in .closebtn, set line-height to 25px and text-align to center.

.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>