中心响应 CSS 圆圈，在父 DIV 内居中文本答案

【问题标题】：Center Responsive CSS circle with centered text inside of a parent DIV中心响应 CSS 圆圈，在父 DIV 内居中文本
【发布时间】：2014-09-16 19:36:18
【问题描述】：

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

我现在专注于两件事 - 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包含整个布局

【问题讨论】：

你能解释一下circle按钮应该在哪里居中

标签： css layout responsive-design vertical-alignment

【解决方案1】：

我知道 2 种方法可以使某些东西垂直：

1.vertiacl-align:middle（适用于内联元素）

2.位置：绝对； top:0 ;bottom:0 ;margin:auto;

但它们都不能应用于浮动 div。

我建议你改变你的html代码。

【讨论】：

【解决方案2】：

从“.buttoncontainer”中移除float: reft样式，像这样：

.buttoncontainer {
    display: block;
    /* float: left; */
    margin-left: 4%;
    padding: 0;
    width: 20%;
}

这将垂直排列按钮。

【讨论】：

【解决方案3】：

从 buttoncontainer div 中删除 .centerme 类。删除并添加一个带有 clearfix 类的容器 div。你需要提到 clearfix 的 css 如下：

 .clearfix:after
{ 
 content: ".";  
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; 
}

删除每个标签的 li。

对于 #navbar 添加 display:table 和对于新的 clearfix div 添加 display:table-cell;vertical-align:middle。

您的新结构如下：

<div id="navbar" style="display:table">  <!-- start navbar -->
<div class="clearfix" style="display:table-cell;vertical-align:middle">
<div id="button1" class="buttoncontainer"><!-- start button1 -->
        <div class="circle circle-border"><!-- start circle construction-->
            <div class="circle-inner">
                <div class="nav-text">
                    <a href="#">ONE</a>
                </div>
            </div>
        </div> <!-- end circle construction-->

    </div>
....
</div>
</div>

【讨论】：