Align Images Vertically over Horizontally - html

Question

I am trying to realign my images side by side, rather than vertically. I have looked at CSS - center two images in css side by side, to no avail. My code from that link is as follows:
HTML:
<!-- Naviational Bar -->
<div width="100%" height="25%">
<div class="btn"><img class="navigational-item nav" alt="Home" src="images/buttons/home.jpg"></div>
<div class="btn"><img class="navigational-item nav" alt="Home" src="images/buttons/home.jpg"></div>
<div class="btn"><img class="navigational-item nav" alt="Home" src="images/buttons/home.jpg"></div>
</div>
CSS:
/*Header and Navigational Bar*/
h1.heading {
padding: 10px;
text-align: center;
font-family: 'Signika', sans-serif;
}
.btn {
/*display: inline-block;*/
margin-left: 10%;
margin-right: 10%;
}
/*Define Button Attributes*/
.navigational-item {
width: 7%;
height: auto;
border-radius: 10px;
position: relative;
-webkit-filter: contrast(50%);
z-index: 100;
}
span.navigational-item {
font-family: sans-serif;
color: red;
}
.nav {
display: block;
margin-left: auto;
margin-right: auto;
}
This is what it looks like:
Is there any way I can lay the image out side by side with a 10px margin between them?
Thanks in advance!

Answer 1

Try below code for "btn" class:
.btn {
margin-left: 10px;
margin-right: 10px;
float:left;
}

Answer 2

You need to put your buttons into a container div like this: (arbitrarily set here for a width of 30% -- edit accordingly)
<div width="100%" height="25%">
<div id="container" style="width:30%;margin:auto">
<div class="btn"><img class="navigational-item nav" alt="Home" src="images/buttons/home.jpg"></div>
<div class="btn"><img class="navigational-item nav" alt="Home" src="images/buttons/home.jpg"></div>
<div class="btn"><img class="navigational-item nav" alt="Home" src="images/buttons/home.jpg"></div>
</div>
</div>
And then set the display property of your buttons to inline-block:
.btn {
/*display: inline-block;*/
margin-left: 10%;
margin-right: 10%;
display:inline-block;
}
See pen here: http://codepen.io/Bangkokian/pen/eppbYL

Answer 3

Have a look at this basic idea :
#container {
text-align: center;
}
.btn {
display: inline-block;
}
.nav {
margin: 0 10px;
}
/* Below is trivial for reszing */
.navigational-item {
width: 50px;
}
http://codepen.io/anon/pen/wKKRMe?editors=110

Answer 4

Do you know the parameters of the images? If so we'll do this
<div class="image_container">
<div class="center">
<div class="btn">
<img src="">
</div>
</div>
</div>
CSS:
.image_container { position: relative }
.center {
position:absolute;
left:50%;
width: 970px;
margin: 0 0 0 -485px;
/*margin left is width / 2*/
}
.btn {
display:inline-block;
margin: 0 10px 0 10px;
}
DEMO HERE
http://jsbin.com/fexasivori/1
EDITED
updated the link and the CSS I mistakenly wrote the wrong math for the margin-left parameter. 970 divided by 2 is not 435 it is 485