Question

我的固定页脚中有两个元素[自定义按钮和一个段落行]（总是留在页面上），我一直试图在中心水平对齐。

        <div class="footer">

                <div class="co_footer_content">

                        <button class="func_button" >
                            <span class="func_button_ico"></span>
                        </button>

                        <p class="footer_txt">Small one liner {{varContent}}</p>

                </div>
        </div>

这是CSS

.footer{
  height: 87px;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #ffffff;
}

.func_button{
    background: transparent;
    border: 0;
    height: 44px;
    width: 44px;
    margin: auto;
    display:block;
    position: absolute;
    cursor: pointer;
    left: 0;
    margin-left: auto;
    margin-right: auto;
}

.func_button_ico{
    background:url(./assets/func_button.png) no-repeat top left;
    display: inline-block;
    margin: auto;
    height: 44px;
    width: 44px;
    float: right;
}

.footer_txt{
    text-align: center;
    padding: 0;
    margin:0;
}

如上面的html代码段所示，varConent可以在某种程度上更改内容的宽度。因此，每次内容更改时，<p>都会重新定位。然而，高度是固定的，即内容不会超过一行。

我希望自定义按钮坚持使用此可变宽度<p>，以便它们位于同一行，但也能够独立于<p>调整按钮的位置。什么是正确的方法这样做？

Answer 1

以下是codepen：https://codepen.io/johnsackson/pen/ZobMLj

  <div class="co_footer_content">

    <button class="func_button">
        <span class="func_button_ico"></span>
    </button>

    <p class="footer_txt">Small one liner {{varContent}}</p>

  </div>
</div>

CSS：

.footer{
  height: 87px;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #ffffff;
}
.co_footer_content {
  display: table;
  margin: 0 auto;
}
.func_button{
    background: transparent;
    border: 0;
    height: 44px;
    width: 44px;
    margin: auto;
    display:block;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    display:table-cell;
    vertical-align: middle;
    text-align: center;
    margin-right: 20px;
}

.func_button_ico{
    background:url(./assets/func_button.png) no-repeat top left;
    display: inline-block;
    margin: auto;
    height: 44px;
    width: 44px;
}

.footer_txt{
    text-align: left;
    padding: 0;
    margin:0;
    display:table-cell;
    vertical-align: middle;
}

在div的中间对齐两个不同高度的元素

1 个答案: