CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Azad Cebiyev
Azad Cebiyev

Reputation: 21

Span must appear inside circle div

I have this HTML:

<div>
    <span>ooisaj dsaoijdiosa djoisaj doais </span>
</div>

And this CSS:

div
{
    margin-left:50px;
    border-radius:50%;
    height:150px;
    width:150px;
    background-color:green;
}

Here is a fiddle with the code.

I want to make the span appear inside the circle. But, I can't achieve it and can't find any question in SO.

Upvotes: 2

Views: 1386

Answers (7)

Zlatko Vujicic
Zlatko Vujicic

Reputation: 353

You can try to change display but stay as lose as can to the original "display" defaults.

Assign:

div{
    display: table;
}
span{
    display: table-cell;
    vertical-align: middle;
}

Fiddle

Upvotes: 0

manupi26
manupi26

Reputation: 141

You can use position:absolute

div {
    margin-left:50px;
    border-radius:50%;
    height:150px;
    width:150px;
    background-color:green;
    position:relative;
}
span{
    position:absolute;
    top:30%;
    left:20%;
}

you should try different percentages

div {
    margin-left:50px;
    border-radius:50%;
    height:150px;
    width:150px;
    background-color:green;
    position:relative;
}
span{
    position:absolute;
    top:30%;
    left:20%;
}
<div>
    <span>ooisaj dsaoijdiosa djoisaj doais </span>
</div>

Upvotes: 1

Downgoat
Downgoat

Reputation: 14371

Using vertical-align and display:table-cell you can align multiple items in a <div>. This is automatic and allows multiple lines to be positioned. tables by default vertically center text, so we can take this property and apply it to our div. This supports IE8+, basically every browser used (97%)

Fiddle

If you wish for the text to be left-aligned you can remove text-align:center and add a little padding. This causes a problem where the size (of the div) increases. To counter this, use box-sizing: border-box

Fiddle

shape-inside might be what you want but that is barely supported, even in the latest browsers

Learn about it here

CSS3 has pleanty of cool share features. Check this link out

Upvotes: 3

Kristiyan Kostadinov
Kristiyan Kostadinov

Reputation: 3712

Here's another way of centering, that doesn't depend on the knowing the span's height and doesn't use display:table-cell. Keep in mind that it works in IE9 and above.

https://jsfiddle.net/5nuLkr4q/7/

div {
    margin-left:50px;
    border-radius:50%;
    height:150px;
    width:150px;
    background-color:green;
    position:relative;
}

span{
    position:absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align:center;
    transform: translateY(-50%);
}

Upvotes: 0

user3951808
user3951808

Reputation: 

div {
    margin-left:50px;
    border-radius:50%;
    height:150px;
    width:150px;
    background-color:green;
    text-align:center;
    vertical-align:middle;
    display:table-cell;
}
div span {
    display:inline-block;
    vertical-align:middle;
}

Upvotes: 0

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7246

You can rely on display:table here, which has a very good browser support: http://caniuse.com/#feat=css-table

Apply display:table-cell, vertical-align: middle, text-align:center to your span.

Then remember to also apply display:table; to your parent container.

div {
    margin-left:50px;
    border-radius:50%;
    height:150px;
    width:150px;
    background-color:green;
    display:table;
}

span{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

Jsfiddle: https://jsfiddle.net/a_incarnati/5nuLkr4q/3/

Upvotes: 1

Mukul Kant
Mukul Kant

Reputation: 7122

you can try like this.

div {
    margin-left:50px;
    border-radius:50%;
    height:150px;
    width:150px;
    background-color:green;
    text-align:center;
    vertical-align:middle;
    display:table-cell;
}
div span {
    display:inline-block;
    vertical-align:middle;
}
<div>
    <span>ooisaj dsaoijdiosa djoisaj doais </span>
</div>

Upvotes: 1

Related Questions