Question

我正在使用Rails构建一个Events应用程序，我目前正在为我的索引页面设置样式。我没有导航/标题栏，而是在右上角有我的站点徽标，我的链接按钮直接位于下方。当用户首次登录时，他们会在徽标下看到带有“创建活动”链接的徽标。点击后，它会将他们带到登录页面。当他们登录时，他们在徽标下有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

我添加了文本中心类，将菜单项对齐到中心。添加了显示：阻止菜单项。检查静态代码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>

CSS - 如何使链接按钮居中

1 个答案: