跨度必须出现在圆div内

Question

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.

Answer 1

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

Answer 2

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> 

Answer 3

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/

Answer 4

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> 

Answer 5

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;
}

Answer 6

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

Answer 7

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%);
}