Mike.Whitehead Mike.Whitehead - 3 months ago 5
CSS Question

CSS - How to centre a link button

I'm building an Events app using Rails and I'm currently styling my index page. I don't have a nav/header bar, rather I have my site logo in the top right hand corner with my links buttons directly underneath.
When a user first logs on they see the logo with a link to 'Create An Event' under the logo. When clicked it takes them to a sign-in page. When they're signed in they have 2 links under the logo, one for 'Create Event' and one for 'Profile'. The 2 links when signed in are side-by-side and sit neatly under the logo. However, when not signed in the 'Create an Event' link (id = eventlink) sits under the logo but to the left. I want this link to sit directly centred under the logo. I've tried lots of different variations but it simply won't shift. How do I solve this?

Here's the code -

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

I added text-center class to align the menu items to center. Added display:block to menu item. Check static code 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>

Comments