CSS - How to centre a link button


Tags: html,css,ruby-on-rails,ruby-on-rails-4

Problem :

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;

}


Solution :

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>


    CSS Howto..

    How can I automatically change the CSS min-height value of a div when a JavaScript is performed?

    How to apply CSS style for getting shadow for text area

    How do I alter my Jquery slideshow to change size in different screen resolutions

    How to increase a counter variable after a callback of a setTimeout-function?

    How can I get this chart to display next to data table in CSS?

    How to target individually nested elements using CSS

    Change Class or CSS “display” property of a DIV and show it smoothly

    How Can I Hide *Only* the Button (Not Entire Element) for the Input Type File in a Django Form? [duplicate]

    How to emulate table cells with CSS (without float)?

    How to achieve multiple icon hover transitions over one image

    how to 3D rotate a 'a' tag?

    CSS how to fix an element to scroll horizontally with the page but not vertically?

    How to make a list float to the right in CSS?

    How to target a CSS ID to a specific HTML tag [closed]

    How do I disable warnings from Aspx files (HTML,CSS)

    How to filter and show only applied CSS in Chrome Developer Tools (like Firebug in Firefox)

    How to apply css to 'text' and 'password' together [closed]

    CSS: how to remove the indent of list items shown in Firefox

    How can I call ajax, without “link_to” kind of helpers?

    How to change background color of my selector's Pseudo-element on rollover?

    how to change the color of disabled controls

    How to set borders between children from parent in CSS?

    how to change style of a css element using jQuery

    How can I debug twitter bootstrap v4-alpha grid? col-sm-offset-* not working

    how to make shape with diagonal div?

    How to create an interactive circular links using CSS [closed]

    How to handle an image inside bootstrap column?

    jQuery Show/Hide - CSS display values are affecting my layout

    How to add border between td's in which are in different tr's?

    How to centre my CSS menu?