CSS - 如何使链接按钮居中

Question

我正在使用 Rails 构建一个事件应用程序，并且我目前正在为我的索引页面设置样式。我没有导航/标题栏，而是在右上角有我的网站徽标，下面是我的链接按钮。 当用户首次登录时，他们会在徽标下方看到带有“创建活动”链接的徽标。单击后，会将他们带到登录页面。登录后，徽标下方有 2 个链接，一个用于“创建活动”，一个用于“个人资料”。登录时的 2 个链接并排排列，整齐地位于徽标下方。但是，当未登录时，“创建活动”链接 (id = eventlink) 位于徽标下方但位于左侧。我希望此链接直接位于徽标下方的中心。我尝试了很多不同的变化，但它根本不会改变。我该如何解决？

这是代码 -

index.html.erb

<div id="logosignin" class="col-md-4">

                    <% if user_signed_in? %>
                        <%= image_tag('MamaKnowsLogo.jpg') %>
                        <li><%= link_to 'Create Event', new_event_path %></li>
                        <li><%= link_to 'Profile', user_path(current_user) %></li>

                    <% else %>
                        <%= image_tag('MamaKnowsLogo.jpg') %>
                        <li id="eventlink"><%= link_to 'Create An Event', new_user_session_path %></li>
                    <% end %>
            </div>

events.css.scss -

 #logosignin img {
    width: 250px;
    height: auto;
    margin: 0 auto;


}

#logosignin {
    width: 350px;
    height: 350px;
    margin: 20px;
    float: right;




}

#logosignin a {
    text-decoration: none;
    color: #FFFFFF;
    padding: 7px;
    border-radius: 10px;
    background-color: #FF69B4;


 }



#eventnav {
    height: 75px;
}

#logosignin li {
    bottom: 30px;
    list-style: none;
    display: inline-block;
    margin: 0 auto;

   }

#eventshow {
    margin-top: 50px;
}

#eventlink {
    margin: 0 auto;
    text-align: center;
    left: 20px;

}

Answer 1

我添加了 text-center 类来将菜单项居中对齐。将 display:block 添加到菜单项。检查静态代码here。

 #logosignin img {
    width: 250px;
    height: auto;
    margin: 0 auto;
}
#logosignin {
    width: 350px;
    height: 350px;
    margin: 20px;
    float: right;
}
#logosignin a {
    text-decoration: none;
    color: #FFFFFF;
    padding: 7px;
    border-radius: 10px;
    background-color: #FF69B4;
    box-sizing: border-box;
    display: block;
 }
#eventnav {
    height: 75px;
}
#logosignin li {
    bottom: 30px;
    list-style: none;
    display: inline-block;
    margin: 0 auto;
   }
#eventshow {
    margin-top: 50px;
}
#eventlink {
    margin: 0 auto;
    text-align: center;
    left: 20px;
}
.text-center{
  text-align:center;
}

<div id="logosignin" class="col-md-4">
    <div class="row-fluid text-center">
      <img src="http://lorempixel.com/50/50" alt="">
    </div>
    <div class="row-fluid text-center">
      <li id="eventlink"><a href="#">Create event</a></li>
      <li id="eventlink"><a href="#">Profile</a></li>
    </div>
</div>