Issue
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?
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>
Solution
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
Answered By - MichaĆ Sadowski Answer Checked By - David Marino (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.