我創建了一個包含文本的圓圈,文本需要始終居中.很簡單,我已經找到了很多例子,例如使用line-height在一行中使用單詞.

我的問題是文本有時會包含一行,有時是兩行,有時是三行,我無法讓它工作.

有任何想法嗎？

I’ve created a fiddle here with three examples.

HTML：

LoremLorem ipsumLorem 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);

}

總結

以上是生活随笔為你收集整理的html纵向文本,html – 垂直对齐CSS圈中多行的文本的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。