0

I'm having trouble aligning some images. Below is a screencap of how things currently look:

enter image description here

I'm trying to get all four images to line up on the same "row". Any future images will start on a new row.

I've tried various methods, though none of them have worked. If a user can give my a rough start, I'd be grateful.

I'd like to add that each image has a simple animation:

        $(document).ready(function(){
        $("#id").hover(function(){
            $(this).stop().animate({opacity: 0.75, marginTop: -10}, 400);
            },function(){
            $(this).stop().animate({opacity: 1.0, marginTop: 0}, 400);
        });
    });
JGrinon
  • 1,453
  • 1
  • 14
  • 36
user3179778
  • 11
  • 1
  • 1
    You've already got 3 of them in the row, so maybe the 4th just doesn't fit. Perhaps something like `selector:last-child { margin-right: 0} ` might help you. – davidpauljunior Jan 09 '14 at 23:55
  • Please show the relevant HTML and CSS code in your question. Adding a http://jsfiddle.net would help debugging your problem. – Olaf Dietsche Jan 09 '14 at 23:59
  • possible duplicate of [Easiest way to vertically align, horizontally aligned images?](http://stackoverflow.com/questions/21033759/easiest-way-to-vertically-align-horizontally-aligned-images) – joseeight Jan 10 '14 at 00:22

4 Answers4

1

One method you can do to get all your images to line up and not have to throw your elements outside of the DOM (using Floats do that). Use display: inline-block; and vertical-align: top;

See example

img {
    display: inline-block; // This will align your items side-by-side
    vertical-align: top; // Why because by default Inline-block sets your vertical to baseline
}

Hope this helps.

Cam
  • 1,884
  • 11
  • 24
0

Can you please post the html code where the images are included ? Normally you should be able to add them by applying the css style "float: left" and by making sure that the available width is enough (make sure to count padding of the container and margins of images to determine de available width).

Cosmin Vană
  • 1,562
  • 12
  • 28
0

if you use float:left this will solve your problem.

digitalextremist
  • 5,952
  • 3
  • 43
  • 62
designhorf
  • 1
  • 1
0

Without seeing your code it's hard to say for sure but it looks like your images don't fit in their container. If you are floating them when you run out of space elements are forced down to the next row. You can try, as mentioned by @davidpauljunior, to remove any right margins being applied to your images. If that doensnt work you can shrink the size of the images (if being applied by the background property) by reducing the width and height values by 90% (or whatever you may need) and applying

background size: 90%;

to the image containers. If they are inline images all the better. Just use

img {
  max-width:100%;
}

and remove any applied dimensions to the inline element. Hope that helps.

Davidicus
  • 716
  • 6
  • 16