javascript - 跨度必须出现在圆 div 内

Question

我有这个 HTML:

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

还有这个 CSS:

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

这是一个fiddle用代码。

我想让跨度出现在圆圈内。但是，我无法实现，也无法在 SO 中找到任何问题。

Answer 1

使用 vertical-align和 display:table-cell您可以在 <div> 中对齐多个元素.这是自动的，允许定位多条线。 tables 默认垂直居中文本，因此我们可以采用此属性并将其应用于我们的 div .这个支持IE8+，基本上所有浏览器都用过(97%)

Fiddle

---

如果您希望文本为 left-aligned你可以删除 text-align:center并添加一个 小填充。这会导致 (div 的) 大小增加的问题。为了解决这个问题，请使用 box-sizing: border-box

Fiddle

---

shape-inside可能是您想要的，但 几乎不支持，即使在最新的浏览器中也是如此

了解一下here

---

CSS3 具有 很多 很酷的共享功能。检查 this link输出