How to put bull inside css circle - html

Question

I need to create a line with a few circles inside and with a dot inside these circles.. They should look like radio buttons - how can I align the dot vertically?
JSfiddle
HTML
<div class="round" id="round-vertically">
<div class="circle img1" id="circle-star"><span>•</span></div>
<div class="circle-line"></div>
<div class="circle img2" id="circle-key"><span>•</span></div>
<div class="circle-line"></div>
<div class="circle img3" id="circle-cursor"><span>•</span></div>
<div class="circle-line"></div>
<div class="circle img4" id="circle-mobile"><span>•</span></div>
</div>

Answer 1

Don't use characters, create it by css:
HTML:
<div class="eye"></div>
CSS:
.eye{
border: 2px solid red;
border-radius: 100%;
position: relative;
width: 2em; height: 2em;
}
.eye::before{
content: "";
display: block;
position: absolute;
width: 1em; height: 1em;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: red;
border-radius: 100%;
}
http://codepen.io/anon/pen/ZOaBKg

Answer 2

Flexbox can do that:
.circle {
width: 15px;
height: 15px;
border: 1px #d3d4de solid;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.circle-line {
width: 1px;
background-color: #d3d4de;
height: 191px;
margin: auto;
}
.circle {
width: 15px;
height: 15px;
border: 1px #d3d4de solid;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
#round-vertically {
padding-top: 95px;
}
#round-vertically SPAN {
color: #d3d4de;
text-align: center;
font-size: 30px;
}
.circle {
border-radius: 50%;
}
<div class="round" id="round-vertically">
<div class="circle img1" id="circle-star"><span>•</span>
</div>
<div class="circle-line"></div>
<div class="circle img2" id="circle-key"><span>•</span>
</div>
<div class="circle-line"></div>
<div class="circle img3" id="circle-cursor"><span>•</span>
</div>
<div class="circle-line"></div>
<div class="circle img4" id="circle-mobile"><span>•</span>
</div>
</div>

Answer 3

One approach is by using translate css property
#round-vertically SPAN {
color: #d3d4de;
font-size:30px;
left: 50%;
position: absolute;
font-size: 30px;
top: 50%;
transform: translate(-50%,-50%);
}
Updated fiddle

Answer 4

You can try below code:
Working demo
.circle {
width: 15px;
height: 15px;
border:1px #d3d4de solid;
margin: auto;
position:relative;
}
#round-vertically SPAN {
color: #d3d4de;
text-align:center;
font-size:30px;
position:absolute;
top:50%; left:50%;
transform: translate(-50%, -50%);
}

Answer 5

Add text-align:center in class 'circle'. Use line-height property line-height: 50%. See below snippet:
.circle-line {
width: 1px;
background-color: #d3d4de;
height: 191px;
margin: auto;
}
.circle {
width: 15px;
height: 15px;
border:1px #d3d4de solid;
margin: auto;
text-align: center;
}
#round-vertically {
padding-top:95px;
}
#round-vertically SPAN {
color: #d3d4de;
font-size:30px;
line-height: 50%
}
.circle {
border-radius: 50%;
}
<div class="round" id="round-vertically">
<div class="circle img1" id="circle-star"><span>•</span></div>
<div class="circle-line"></div>
<div class="circle img2" id="circle-key"><span>•</span></div>
<div class="circle-line"></div>
<div class="circle img3" id="circle-cursor"><span>•</span></div>
<div class="circle-line"></div>
<div class="circle img4" id="circle-mobile"><span>•</span></div>
</div>