垂直對齊CSS圈中多行的文本

我創建了一個包含文本的圓，文本需要始終居中。很簡單，我用line-height舉例說明了很多這樣的例子。垂直對齊CSS圈中多行的文本

我的問題是，文本有時會包含一行，有時兩個，有時三個，我不能得到那個工作。

任何想法？

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

來源

2015-02-06 Topr

爲什麼你需要'position：absolute'對你'.splash'類？如果你刪除它，它會工作得很好。 – Vucko 2015-02-06 08:38:01

看到這個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; 
}

來源

2015-02-06 08:38:24

工作得很好，謝謝！ – Topr 2015-02-06 08:51:18

你可以內部.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/

來源

2015-02-06 08:38:16

改進的例子（清除'border-radius'並製作百分比高度/寬度）：http://jsfiddle.net/tdtx3cfe/7/ – dfsq 2015-02-06 08:50:49

@dfsq好的工作;） – 2015-02-06 09:02:08

作爲一個選項，您可以對齊飛濺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。

來源

2015-02-06 08:48:14

垂直對齊CSS圈中多行的文本

回答

相關問題