css - 中心响应 CSS 圆圈，在父 DIV 内居中文本

Question

我最近开始为一个四按钮网页布局开发 CSS，我打算将其插入到 Wordpress 主题中。

我现在专注于两件事 - 4 个等半径圆圈按钮和完全响应式布局。

我在以下位置找到了一种创建文本居中的响应式圆圈的绝妙方法:this website

这里唯一的问题是让它们在 parent DIV 中垂直居中。绝对定位是行不通的，我认为它行不通，因为按钮高度是未知的。

我目前正在研究 CSS 转换，这是我迄今为止最接近的方法。我已将称为 centerme 的垂直居中类应用于各种 div，如此处所示。

CSS:

.circle {
      margin-left: auto;
      margin-right: auto;
      border-radius: 50%;
      width: 100%;
      position: relative;
      background-color:purple;
}
.circle-border {
      border: 1px solid black;
}
.circle:before {
      content: "";
      display: block;
      padding-top: 100%;
}
.circle-inner {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      text-align: center;
}
.nav-text {
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      height: 1em;
      line-height: 1em;
      font-size: 1em;
}
.centerme{
      position: relative;
      top: 50%;
      transform: translateY(50%);
      transform-style: preserve-3d;
}

HTML:

    <div id="button4" class="buttoncontainer centerme"><!-- start button4 -->
        <div class="circle circle-border"><!-- start circle construction-->
            <div class="circle-inner">
                <div class="nav-text">
                    <li><a href="#">FOUR</a></li>
                </div>
            </div>
        </div> <!-- end circle construction-->
    </div> <!-- end button4 -->

很抱歉，如果这个问题已经发布。提前致谢

jsfiddle here 包含整个布局

Answer 1

我知道 2 种让东西垂直的方法:

1.vertiacl-align:middle(适用于行内元素)

2.position:absolute;顶部:0 ；底部:0 ；边距:自动；

但它们都不能应用于 float div。

我建议您更改 html 代码。