CODEWITHSUNDEEP
htmlcssruby-on-rails
Tim R
Tim R

Reputation: 524

Aligning Buttons with rails code, css, and html

I have two buttons in my form, I am using a CSS sheet to layout the tables and I want to have the buttons in the last row, but I want them side by side.

My current code looks like 

<button><%= link_to "Edit", edit_user_path(u.id), { :method =>get } %></button>
<button><%= link_to "Delete", user_path(u.id), { :method => delete, :class=>destroy, data: {confirm: 'Are you sure?' } %></button>

enter image description here

If I change it to: 

<button><%= button_to "Edit", edit_user_path(u.id), { :method =>get } %></button>
<button><%= button_to "Delete", user_path(u.id), { :method => delete, :class=>destroy, data: {confirm: 'Are you sure?' } %></button>

enter image description here

The buttons end up side by side, but with an extra button from the button tag. If I change it to:

<td><%= button_to "Edit", edit_user_path(u.id), { :method =>get } %>
<%= button_to "Delete", user_path(u.id), { :method => delete, :class=>destroy, data: {confirm: 'Are you sure?' } %></td>

enter image description here

The buttons are in the same row, but are horizontally alligned.

Is there a way to get this to correctly display in the center of the column with both buttons? Perhaps add something in the CSS that tells it what to do with the button call instead?

Upvotes: 1

Views: 2556

Answers (1)

jojo
jojo

Reputation: 1145

Wrap the buttons in a div like so: https://jsfiddle.net/5th07vq6/

HTML:

 <div class="center">
     <button>Edit</button>
     <button>Delete</button>
 </div>

CSS:

.center {
     width: 50%;
     margin: 0 auto;
}

Upvotes: 3

Related Questions