[Solved] align text in the middle of a circle with css [duplicate]

by


As long as you only have one line of text, a simple trick is to set its line-height to the height of the circle:

.circle {
  background: rgba(72, 156, 234, 1);
  border-radius: 50%;
  height: 80px;
  width: 80px;
  position: relative;
  box-shadow: 0 0 0 5px #F1F1F1;
  margin: 10px;
  color: #6F0;
  vertical-align: middle;
}

.text_circle {
  font-size: 36px;
  margin-bottom: 50px;
  line-height: 80px;
}
<div align="center" class="circle"><span class="text_circle">5</span></div>

solved align text in the middle of a circle with css [duplicate]