CODEWITHSUNDEEP
htmlcss
Josh Poor
Josh Poor

Reputation: 533

How to make a circle and put text in the middle using CSS

Here is my fiddle Fiddle And here is the code

.optionalphabetnumber {
	background-color:#ff3333;
	color:white;
	width:20px;
	height: 20px; 
	text-align:center; 
  border-radius:50%;
}
button {
    background-color: #ffffff;
    color: #777;
    font-size: 18px;
    height: 66px;
    min-width: 320px;
    width: 50%;
    cursor: pointer;
    text-align: left;

}
<button><span class="optionalphabetnumber">A &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Superman</button>

I want to put "A" in a circle. But border-radius:50% is not making a perfect circle. And how do I put the text(just "A") in center?

Upvotes: 2

Views: 85

Answers (3)

Jithin Raj P R
Jithin Raj P R

Reputation: 6797

This will work for you.

I have added display: inline-block;margin-right: 5px;float: left; to your .optionalphabetnumber, because .optionalphabetnumber is a <span> and it's default display attribute is inline. So it will not be aligned properly with other components neither we can style it properly. So by applying display: inline-block; we are overwriting its default attribute.

.optionalphabetnumber {
  background-color: #ff3333;
  color: white;
  width: 20px;
  height: 20px;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  float: left;
}

button {
  background-color: #ffffff;
  color: #777;
  font-size: 18px;
  height: 66px;
  min-width: 320px;
  width: 50%;
  cursor: pointer;
  text-align: left;
}
<button><span class="optionalphabetnumber">A</span>Superman</button>

Upvotes: 2

zer00ne
zer00ne

Reputation: 43880

Add display:inline-block; to .optionalphabetnumber The <span> is an inline element, height applied to inlines do not work like they do on a block or inline-block.

.optionalphabetnumber {
	background-color:#ff3333;
	color:white;
	width:20px;
	height: 20px; 
	text-align:center; 
  border-radius:50%;
  display:inline-block;
}
button {
    background-color: #ffffff;
    color: #777;
    font-size: 18px;
    height: 66px;
    min-width: 320px;
    width: 50%;
    cursor: pointer;
    text-align: left;

}
<button><span class="optionalphabetnumber">A &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Superman</button>

Upvotes: 2

sol
sol

Reputation: 22929

Set display to inline-block, and, optionally, give the circle some padding...

.optionalphabetnumber {
  background-color: #ff3333;
  color: white;
  width: 20px;
  height: 20px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  padding: 1em;
  margin-right: 1em;
}

button {
  background-color: #ffffff;
  color: #777;
  font-size: 18px;
  height: 66px;
  min-width: 320px;
  width: 50%;
  cursor: pointer;
  text-align: left;
}
<button>
<span class="optionalphabetnumber">A</span>Superman</button>

Upvotes: 2

Related Questions