CSS - Как центрировать кнопку ссылки

Question

Я создаю приложение Events с использованием 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

Я добавил класс текста центр, чтобы выровнять пункты меню в центре , Добавлен дисплей: блок в пункт меню. Проверьте статический код 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>