html - CSS - 如何使链接按钮居中

Question

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

这是代码 -

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>

事件.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 类来将菜单项居中对齐。添加显示: 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>