Question posted in 
I’m having quite some trouble trying to align buttons, want to align them vertically and horizontally (2 columns, 3 rows).
Here’s how I’ve designed it in Photoshop:
And here’s how it looks:
Initially the Foreground was centered and looked exactly like on the Design, but the buttons were not aligned properly, so a friend told me I should use a table to fix it, it did, but now I can’t align the buttons, any tips?
Html and CSS below:
.Background {
background: #024068;
position: absolute;
left: 0px;
top: 0px;
width: auto;
height: auto;
z-index: 1;
}
.Foreground {
background: #03609b;
background-repeat: no-repeat;
-webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.75);
width: 50%;
margin: auto;
height: 1153px;
z-index: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
.table {
align-content: inherit;
}
.Button.ButtonTxt {
background: #5fa4d0;
border: none;
-webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.45);
-moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.45);
box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.45);
transition: all 0.3s ease 0s;
width: 331px;
height: 159px;
opacity: 1;
z-index: 3;
font-size: 50px;
font-family: "Bebas Neue";
color: rgb(255, 255, 255);
line-height: 1.2;
text-align: center;
text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
}
.Button:hover {
opacity: 0.75;
}
.Button:active {
background-color: #1E5B82;
transition: none;
}<body class="Background">
<div class="Foreground">
<table class="table">
<tr>
<td><input class="Button ButtonTxt" type="button" value="Button1"></td>
<td><input class="Button ButtonTxt" type="button" value="Button2"></td>
</tr>
<tr>
<td><input class="Button ButtonTxt" type="button" value="Button3"></td>
<td><input class="Button ButtonTxt" type="button" value="Button4"></td>
</tr>
<tr>
<td><input class="Button ButtonTxt" type="button" value="Button5"></td>
<td><input class="Button ButtonTxt" type="button" value="Button6"></td>
</tr>
</table>
</div>
</body>
4
Answers
Few Changes I made to your code (if you want to continue the use of tables here).
I added a cell spacing to the
tdwhich you can adjust to suit your taste.I also reduce the font size of your button text (It was quite big)
I increased the ratio of the foreground to 80% (you can adjust this to your taste as well)
First of all: The table tag is a method to store tabular data, not to lay out a page, and, therefore, it should not be used in such way.
Here’s another way for you to accomplish what you want:
Add this in your CSS:
And change your HTML to this:
This creates two divs, one for the left buttons, one for the right ones. Then it styles them using flex to lay them out like a column. If you want the buttons to be closer or further apart from each other, change the height property of .left-side and .right-side in the CSS.
Let me know if this suits your needs
your code is way prom being perfect, I’d suggest use flexbox instead of table.
However if you want to still use table here you have (just adjusted your code to fit PS mockup)
I have a solution without tables for you, using flex. I added container elements for the rows (pairs of buttons in one line) and made everything be DIVs. View it at full page size.