CODEWITHSUNDEEP
htmlcsswebbrowser-control
user14389292
user14389292

Reputation:

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

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

current situation

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

Upvotes: 0

Views: 1167

Answers (2)

Timothy Alexis Vass
Timothy Alexis Vass

Reputation: 2705

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>

Upvotes: 0

Niraj
Niraj

Reputation: 305

Just add this extra CSS in your .dot class

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

Upvotes: 1

Related Questions