Align Images Vertically over Horizontally

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!

you need to place them inline-block. most likely the image as well `.btn img{ display:inline-block }` — EasyBB, Sep 12 '15 at 05:14

score 1 · Answer 1 · answered Sep 12 '15 at 05:23

1

Try below code for "btn" class:

.btn {      
    margin-left: 10px;            
    margin-right: 10px;
    float:left;
}

answered Sep 12 '15 at 05:23

Omkar

298
5
27

I want them centered though. – Skyler Spaeth Sep 12 '15 at 05:25

score 1 · Answer 2 · answered Sep 12 '15 at 05:28

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

I noticed that, however the images were defined in CSS with background-image. — Skyler Spaeth, Sep 12 '15 at 19:36

Shikkediel · Answer 3 · 2015-09-12T06:14:19.057

1

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

edited Sep 12 '15 at 06:14

answered Sep 12 '15 at 06:03

Shikkediel

5,195
16
45
77

EasyBB · Answer 4 · 2015-09-12T06:20:50.073

1

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

edited Sep 12 '15 at 06:20

answered Sep 12 '15 at 06:13

EasyBB

6,176
9
47
77

That works fine for that image (xD), however mine which has a much higher resolution even though it is scaled in CSS down to 7%, doesn't want to show horizontally. – Skyler Spaeth Sep 12 '15 at 07:02
what do you mean horizontally? Fix the rest with your own knowledge. Like I said change the width of `center` then the `margin` which will be `0 0 0` plus width divided by two. I **WOULD NEVER** use a hi-res image scaled to 7% that is just horrible designing – EasyBB Sep 12 '15 at 07:52

Align Images Vertically over Horizontally

4 Answers4