CODEWITHSUNDEEP
css
MarioC
MarioC

Reputation: 3228

CSS - create a circular DIV with vertical aligned text inside

I would like to create a circular DIV with bootstrap 3, and try to set some text inside vertically centered, but i could not...

this is the HTML

<div class="circle">
<div>
<span>Info</span><br/>
<span class="big">1000</span>
</div>
</div>

with this css

.circle{
    border-radius:50%;
    border: 3px solid #fff;
    background-color:red;
    display:table;
    width:100%;
    height:auto;    
    padding-top:100%;

}

.circle > div{
    display: table-cell;
    vertical-align: middle;
}

.big {
  font-size:30px;
}

If I put no text, the circle is perfect, with the text it becomes an oval... here you can find a fiddle of it

Fiddle

Upvotes: 0

Views: 551

Answers (2)

Intervalia
Intervalia

Reputation: 10945

Try this:

fiddle: https://jsfiddle.net/intervalia/jhz1xvcL/1/

.circle{
	border-radius:50%;
	border: 3px solid #fff;
	background-color:red;
	display:table;
	width:100%;
	height:auto; 	
	padding-top:100%;
	position: relative;
}

.circle > div{
	display: flex;
	align-items: center;
  align-content: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.big {
  font-size:30px;
}
<div class="circle">
<div>
<span>Info</span><br/>
<span class="big">1000</span>
</div>
</div>

Upvotes: 0

dom_ahdigital
dom_ahdigital

Reputation: 1681

You could potentially use flexbox for this:

.circle {
  border-radius: 50%;
  border: 3px solid #fff;
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.circle:after {
  content: '';
  padding-bottom: 100%;
}

.big {
  font-size: 30px;
}
<div class="circle">
  <div class="circle-inner">
    <span>Info</span><br/>
    <span class="big">1000</span>
  </div>
</div>

Upvotes: 1

Related Questions