带有文本的自适应透明重叠式css圆,垂直对齐并居中对齐 [英] Responsive transparent overlapping css circles with text align vertical and center
本文介绍了带有文本的自适应透明重叠式css圆,垂直对齐并居中对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
似乎无法使我的文字在每个圆圈中居中对齐和垂直对齐。尝试将h1文本放入另一个div-显示表中,但是在每个圆类内都包含文本时遇到了问题。
这是我的带示例代码的代码笔吗?
Can't seem to get my text to align center and vertical within each circle. Tried putting h1 text inside of another div - display table, but having problems containing text inside each circle classe. here is my codepen with example code?
HTML:
<div id="circle-wrapper">
<div class="circle1 transparent_class"><h1>Two lines <br />&Two lines</h1></div>
<div class="circle2 transparent_class"><h1>Two lines<br /> Two lines</h1></div>
<div class="circle3 transparent_class"><h1>Two lines<br />& Two lines</h1></div>
<div class="circle4 transparent_class "><h1>Two lines<br /> Two lines</h1></div>
</div><!--close of circle-wrapper-->
CSS:
#circle-wrapper{
position:relative;
top:0;
left:0;
}
.circle1, .circle2, .circle3, .circle4 {
position:absolute;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
width: 32%;
height: 32%;
padding-bottom: 32%;
}
h1.circle1 h1 {
display:inline-block;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.circle1 {
background-color:#889fbe;
color:000;
margin-top:-8%;
left:10%;
}
.circle2 {
margin-top:10%;
color:000;
left:24%;
background-color:#b1daf6;
}
.circle3 {
margin-top:24%;
left:10%;
background-color:#4f4f51;
}
.circle4 {
margin-top:10%;
left:-8%;
background-color:#56a0d3;
}
.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
/* IE 5-7 */
filter: alpha(opacity=70);
/* Netscape */
-moz-opacity: 0.7;
/* Safari 1.x */
-khtml-opacity: 0.7;
/* Good browsers */
opacity: 0.7;
}
http://codepen.io/matriplett/pen/LJcnE
推荐答案
在您的 h1
<div class="circle1 transparent_class">
<div class="wrapper"><h1>Two lines <br />&Two lines</h1>
</div>
</div>
并更改样式,如下所示:
and change the style like this:
.wrapper{
margin-top:40%;
height:100%;
width:100%;
display: table;
}
有关更新的笔,请参见此处。 http://codepen.io/anon/pen/yugBK
see here for a updated pen. http://codepen.io/anon/pen/yugBK
这篇关于带有文本的自适应透明重叠式css圆,垂直对齐并居中对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文