我创建了一个包含文本的圆圈,文本需要始终居中.很简单,我已经找到了很多例子,例如使用line-height在一行中使用单词.
我的问题是文本有时会包含一行,有时是两行,有时是三行,我无法让它工作.
有任何想法吗?
HTML:
Lorem
Lorem ipsum
Lorem ipsum dolor
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);
}