垂直对齐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圈中多行的文本

回答

相关问题