Question

我使用font awesome创建了一个向下箭头来显示/隐藏登录选项。但是，它不再是中心。

如何让它成为中心？

我还会将其更改为向下箭头，用javascript完成，如果它的字体很棒创建问题请说明如何解决未来的问题。

该网站以http://etreecycle.co.uk为例。

<!-- LOGIN / SIGNUP -->
<style>
    .e-join-container {
        position: relative;
        width: calc(90% - 20px);
        padding: 10px;
        margin: 0 auto;
        text-align: center;
        color: #9A7D2A;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #e0dddd;
        margin-bottom: 20px;
        padding-bottom: 40px;
    }
    .e-join-container .e-title {
        font-size: 40px;
        margin: 20px;
    }
    .e-join-container .e-button {
        width: 200px;
        padding: 10px;
        display: inline-block;
        margin: 10px;
        color: #9A7D2A;
        border: 5px solid #9A7D2A;
        font-weight: 800;
        text-transform: uppercase;
    }
    .e-join-container .e-button:hover {
        background-color: rgba(153,123,41,0.48);
        color: #fff;
        text-decoration: none;
    }
    .e-join-container .e-show-hide {
        position: absolute;
        bottom: -25px;
        height: 60px;
        width: 60px;
        background-color: #e0dddd;
        border-radius: 1000px;
        margin: 0 auto;

    }
</style>
<?php if (!is_user_logged_in()) { ?>
<div class="e-join-container">
    <p class="e-title">Welcome To eTree</p>
    <p>Create an account and join 1000's of shoppers seeking quality products made in our english factories.</p>
    <div class="e-join">
        <a href="/account" class="e-Login e-button">
            Login
        </a>
        <a href="/account" class="e-signup e-button">
            Signup
        </a>
    </div>
    <a class="e-show-hide"><i class="fa fa-angle-double-down fa-4x"></i></a>
</div>
<?php } ?>

Answer 1

找到解决方案：

.e-join-container .e-show-hide
  position: absolute;
  bottom: -25px;
  height: 60px;
  width: 60px;
  background-color: #e0dddd;
  border-radius: 1000px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

Answer 2

您可能希望删除position: absolute; bottom: -25px;元素的.e-show-hide个样式。使用这些样式，您可以明确定义元素的位置。

在网站上删除这些样式会将元素移到中心位置。

样式链接不居中

2 个答案: