CODEWITHSUNDEEP
htmlcsscss-positionvertical-alignment
sachin_ware
sachin_ware

Reputation: 1561

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

this is what i created:

enter image description here

This is what i want like:

enter image description here

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.

Upvotes: 0

Views: 54

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157324

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 */
}

Upvotes: 3

Related Questions