showing two images in the center of a row (on the same row) but with a specific space in between

Question

sorry if I'm asking my question in not a professional way. I have a div inside of which I have two images (previous and next images-arrows); I want to put them in a row in way that these two images are in the center with a some specific space in between;

What I have tried is as following:

<div class='navbars'>
      <img src='<?PHP echo base_url('image/previous.png'); ?>' id='previous' style='width: 70px;height:70px;' alt='previous'>
      <img src='<?PHP echo base_url('image/next.png'); ?>' id='next' style='width: 70px;height:70px;' alt='next'>
</div>

and my CSS:

#previous , #next{
    cursor: pointer;
}

#previous{
    margin-left: 330px;
}

#next{
    margin-left: 550px;
}

But first of all the 330pc and 550 are not a good way to put them in center! Is there any better way? Secondly images are shown in two different rows! not the same row!

If you need more clarification, please just let me know which part you need more lcarification, and I will provide more clarification.

score 1 · Accepted Answer · answered Oct 31 '13 at 20:00

I'd use one of two techniques.

Put your images within a <span> and use margin: auto; for the span.
Use text-align: center; on the <div> so elements inside are centered.

For the separation, I usually favour adding a margin to one of the elements.

You can see the second option working at: http://jsfiddle.net/57HCG/ :

#previous , #next{
    cursor: pointer;
}

#next{
    margin-left: 25px;
}

.navbars {
    text-align: center;
}

score 0 · Answer 2 · answered Oct 31 '13 at 19:52

0

For them to be next to one another, you'll need to float them:

float:left;

And then you add:

margin-right:XXpx;

to the left one.

Should do the trick.

answered Oct 31 '13 at 19:52

R Lacorne

604
5
10

already tried that! but the problem is that below these arrows I have my gallery and if I float arrows some images come up on the same arrow of next and previous arrowS – user385729 Oct 31 '13 at 19:53
Would you care to produce a fiddle for us then? I have trouble seeing what you mean with only my imagination. ;) – R Lacorne Oct 31 '13 at 19:54
evan if I put the width 100% still some images of my gallery come up on the same row of next and previous arrows! – user385729 Oct 31 '13 at 19:54
I think you should provide us with more code then, in order for us to see how you built your page and what causes problems. – R Lacorne Oct 31 '13 at 19:56

score 0 · Answer 3 · answered Oct 31 '13 at 20:02

Add the images as inline-block and text-align:center on the parent. Then add margin-right to the first.

JSFiddle

HTML

<div class="wrapper">
    <img src="http://lorempixel.com/output/abstract-q-c-70-70-6.jpg" alt=""/>
    <img src="http://lorempixel.com/output/abstract-q-c-70-70-6.jpg" alt=""/>
</div>

CSS

.wrapper {
    font-size:0;
    text-align:center;
    width:50%;
    margin:0 auto;
    border:1px solid grey;
    padding:10px;
}

.wrapper img {
    display:inline-block;
    vertical-align:top;
}

.wrapper img:first-child {
    margin-right:25px;
}

score 0 · Answer 4 · edited May 23 '17 at 11:57

Many are of the opinion that floating elements for layout purposes is bad. See this SO question: Are floats bad? What should be used in its place

So let me propose a different solution (div2 and div3 are stand-ins for images):

HTML

<div id="div1">
    <div id="div2">1</div>
    <div id="div3">2</div>
</div>

CSS

#div1 {
    position:relative;
    background-color:#CCC;
    height:100px;
}

#div2, #div3 {
    position:absolute;
    height:100px;
    width:100px;
}

#div2 {
    background-color:#09f;
    top:0;
    right:50%;
    margin-right:10px;
}

#div3 {
    background-color:#f90;
    top:0;
    left:50%;
    margin-left:10px;
}

DEMO

http://jsfiddle.net/qK6JA/

showing two images in the center of a row (on the same row) but with a specific space in between

4 Answers4