Centralize span within the circle

Asked

Viewed 85 times

-2

How to center the + horizontal and vertical so that it is fixed in any size?

I’m doing here, but the positioning of the +, is getting different, on my computer gets centralized, now opening on the laptop that has smaller monitor the + get higher.

Another ready, is how to position the circle on the right.

Thank you.

.icoAdd {
  position: absolute;
  bottom: 0;
  background-color: #3880ff;
  margin: 20px;
  border-radius: 50%;
  width: 70px;
  height: 70px;
}

.icoAdd span {
  position: absolute;
  top: 4%;
  left: 29%;
  font-size: 40px;
  color: white;
}
<div class="icoAdd">
  <span>+</span>
</div>

1 answer

2


One option is to use display: flex in Parent instead of position: absolute in span.

As has . icoAdd with position: absolute right: 0 stands to the right.

.icoAdd {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #3880ff;
    margin: 20px;
    border-radius: 50%;
    width: 70px;
    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.icoAdd span {
    font-size: 40px;
    color: white; 
}
<div class="icoAdd">
    <span>+</span>
</div>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.