Question

我最近开始使用CSS处理一个四按钮的网页布局，我打算将其插入Wordpress theme。

我现在专注于两件事 - 四个等半径圆的按钮，以及完全响应的布局。

我找到了一种很棒的方法来创建具有居中文字的响应式圈子：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

我知道两种方法可以使事物垂直：

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

<强> 2.position：绝对; top：0; bottom：0; margin：auto;

但它们都不适用于浮点数。

我建议你更改你的HTML代码。

Answer 2

从＆＃34; .buttoncontainer＆＃34;中删除float：reft样式，如下所示：

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

这会垂直排列按钮。

Answer 3

从buttoncontainer div中删除.centerme类。删除并添加带有clearfix类的容器div。您需要提及css for clearfix，如下所示：

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

删除每个标记的li。

对于#navbar add display：table和new clearfix div add 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>

在父DIV中居中文本的中心响应CSS圈

3 个答案: