Question

似乎无法让我的文字在每个圆圈内对齐中心和垂直。尝试将h1文本放在另一个div - 显示表中，但在每个圆圈内包含文本时遇到问题。这是我的codepen示例代码？

HTML：

<div id="circle-wrapper">
<div class="circle1 transparent_class"><h1>Two lines <br />&amp;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 />&amp; 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

Answer 1

在div

周围添加包装h1

    <div class="circle1 transparent_class">
<div class="wrapper"><h1>Two lines <br />&amp;Two lines</h1>
</div>
</div>

并改变这样的风格：

.wrapper{
  margin-top:40%;
  height:100%;
  width:100%;
  display: table;
}

在这里查看更新的笔。 http://codepen.io/anon/pen/yugBK

Answer 2

像这样......首先添加一个圆圈类

  <div id="circle-wrapper">
    <div class="circle circle1 transparent_class">  
      <h1>Two lines <br />&amp;Two lines</h1>
    </div>
    etc.

然后在包含元素

上设置一个高度

#circle-wrapper{
    position:relative;
    top:0;
    left:0; 
    height: 1200px;
}

以及.circle和h1 ......

.circle, h1 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 400px;
  width: 400px;
}

http://codepen.io/anon/pen/GnLJK

响应透明重叠的CSS圈与文本对齐垂直和中心

2 个答案: