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>中的多个项目。这是自动的，允许定位多条线。默认情况下，表是垂直居中的文字，因此我们可以将此属性应用到我们的div。这支持IE8 +，基本上每个浏览器使用（97％）

Fiddle

<小时/> 如果您希望文字为left-aligned，则可以删除text-align:center并添加小填充。这会导致（div）的大小增加的问题。要解决此问题，请使用box-sizing: border-box

Fiddle

<小时/> shape-inside可能是您想要的，但即使在最新的浏览器中也支持

了解它here

<小时/> CSS3 具有很酷的共享功能 pleanty 。检查this link

Answer 2

你可以这样试试。

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

您可以在此处依赖 display：table ，它具有非常好的浏览器支持： http://caniuse.com/#feat=css-table

将 display：table-cell，vertical-align：middle，text-align：center 应用到您的范围。

然后记得也应用 display：table ;到你的父容器。

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

您可以使用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%;
}

你应该尝试不同的百分比

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

您可以尝试更改显示，但可以保持原始“显示”默认设置。

分配：

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

Fiddle

Answer 7

这是另一种居中方式，不依赖于知道跨度的高度而不使用display:table-cell。请记住，它适用于IE9及更高版本。

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

跨度必须出现在圆形div内

7 个答案: