how to set vertical alingn of a div shown as circle? - html

Question

this is what i created:
This is what i want like:
this is my code:
<div id="OR"><span style=" vertical-align: middle;background:blue;">OR</span></div>
this is css:
div #OR { border-radius:50%;border-style:1px solid black;background:red;width:42px;height:42px;float:right; background:red;vertical-align: middle;}
div #OR span{ vertical-align: middle; }
so please help me to bring thart OR in a center of the div.

Answer 1

I don't think you will need an extra element for the OR text, what you need is the line-height property
Demo
div {
height: 50px;
width: 50px;
border: 1px solid #ddd;
border-radius: 50%;
font-weight: bold;
line-height: 50px; /* Equals elements height */
text-align: center;
}
This solution is perfect if you want to vertical-align single word, if you want to perfectly center an element horizontally and vertically, other two approaches are to use display: table-cell; with vertical-align: middle; or use CSS Positioning.
CSS Positioning way..
Explanation: Here am using position: relative; on the wrapper/parent element and than am assigning position: absolute; for the child element. Though, here's a catch, you need to assign fixed width to the child element you are trying to center.
Demo 2
div {
height: 50px;
width: 50px;
border: 1px solid #ddd;
border-radius: 50%;
font-weight: bold;
position: relative;
}
div span {
position: absolute;
border: 1px solid #f00;
left: 50%;
top: 50%;
height: 20px;
width: 24px;
margin-top: -10px; /* Half of the elements height */
margin-left: -12px; /* Half of the elements width */
}