博客讨论了如何在HTML中创建一个圆形元素，并使内部文本在任何行数下都能保持垂直居中。问题在于文本行数不确定，从一行到多行不等。作者提到了使用line-height实现单行文本居中，但需要找到一个通用的方法适应不同行数的情况。CSS代码示例中涉及了border-radius、absolute定位、display属性和transform旋转。
我创建了一个包含文本的圆圈,文本需要始终居中.很简单,我已经找到了很多例子,例如使用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);
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
