Question

我创建了一个包含文字的圆圈，文字需要始终居中。很简单，我已经使用line-height在一行中找到了很多这样的例子。

我的问题是文本有时会包含一行，有时是两行，有时是三行，我无法使用它。

有什么想法吗？

I've created a fiddle here with three examples.

HTML：

<div class="container">
    <div class="splash">Lorem</div>
</div>
<div class="container">
    <div class="splash">Lorem ipsum</div>
</div>
<div class="container">
    <div class="splash">Lorem ipsum dolor</div>
</div>

CSS：

.container{
    position: relative;
    width: 70px;
    display: inline-block;
}
.splash {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    height: 70px;
    width: 70px;
    background: green;
    color: white;
    position: absolute;
    overflow: hidden;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
}

Answer 1

请参阅此http://jsfiddle.net/tdtx3cfe/2/，我使用了一种不同的方法，将文本插入范围并将其设为display:table-cell，vertical-align:middle，将启动更改为display:table }，即使你想保持泼水绝对

，这也会有效

<div class="container">
    <div class="splash"><span>Lorem<span></div>
</div>
<div class="container">
    <div class="splash"><span>Lorem ipsum<span></div>
</div>
<div class="container">
    <div class="splash"><span>Lorem ipsum dolor<span></div>
</div>


.container{
    position: relative;
    width: 70px;
    display: inline-block;
}
.splash {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    height: 70px;
    width: 70px;
    background: green;
    color: white;
    position: absolute;
    overflow: hidden;
    display: table;
    text-align: center;
    vertical-align: middle;
    transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
}
span{
    display:table-cell;
     vertical-align: middle;
}

Answer 2

您可以在.splash中创建一个额外的span标记，并通过位置绝对和转换翻译技巧将其居中

.container{
    position: relative;
    width: 70px;
    display: inline-block;
}

.splash {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    height: 70px;
    width: 70px;
    background: green;
    color: white;
    position: absolute;
    transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
}

.splash span {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

对于这样的标记：

<div class="container">
    <div class="splash"><span>Lorem</span></div>
</div>

示例：http://jsfiddle.net/tdtx3cfe/3/

Answer 3

作为其中一个选项，您可以将启动与flexible boxes对齐：

.container {
    width: 70px;
    height: 70px;
    display: inline-flex;
    border-radius: 50%;
    background: green;
    justify-content: center;
    align-items: center;
}
.splash {
    color: white;
    text-align: center;
    transform: rotate(15deg);
}
body {
    display: flex
}

我必须添加body样式才能垂直对齐容器。

JSFiddle

垂直对齐CSS圈中多行的文本

3 个答案: