Styled Link Not Centered

Question

Я разработал эту ссылку, используя шрифт 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 элемента. С этими стилями вы явно определяете положение элемента.

Удаление этих стилей на вашем веб-сайте перемещает элемент в центр.