Align Images Horizontally

  • I have spent a good twelve hours today, trying to make horizontal rows of images. You might think me OCD. I’ve wrapped a div around the whole lot of them, and here is the css that doesn’t work:
    div.eyePillowPix { display:inline; float:left; position:relative; }

    I’ve tried using WP to do it, using No Alignment, then just aligning the first photo left and hoping the rest would follow, and every combination thereof.

    Here is the page live, any suggestions would be whole-heartedly appreciated.

    https://test.yoganidranews.com/eye-pillows

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter humbyrds777

    (@humbyrds777)

    Actually, when I delete all the photos and upload them again, they are side by side. But when I add a caption, they align vertically and will not budge.

    CSS-trick’s Don’t Overthink It Grids is a great resource to learn how to make your own grid-like layouts. Hope this helps!

    Thread Starter humbyrds777

    (@humbyrds777)

    Thanks for the response, bemdesign. I need my end user to be able to delete and add photos, is it something they’ll be able to use easily (ie minimal code) once I’ve got it set up?

    Thread Starter humbyrds777

    (@humbyrds777)

    bemdesign, is the grid-like layout that you’re suggesting an improvement over just simply making divs for every image, or it really just the same sort of thing, more or less?

    Thread Starter humbyrds777

    (@humbyrds777)

    Maybe there’s another way to add captions so that I don’t disturb the original side-by-side results that I get immediately upon loading the photos? Anyone?

    That would entirely depend on the end user – if you need a more fool-proof method then, though I dislike even mentioning it, you may need to rely on a table layout.

    Thread Starter humbyrds777

    (@humbyrds777)

    Resolved! Here it is, the holy grail of css, the humble asterisk:

    div#eyePillows * { display:inline; float:left; }

    The id of eyePillows combined with the asterisk made the rule apply to all elements within the div. I hope someone else finds this css under-utilized “trick” helpful. I’m going to leave this as un-resolved for a bit in case anyone else wants to comment on it.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What was the problem why you couldn’t float left the divs?

    .wp-caption {
  float: left;
}

    Thread Starter humbyrds777

    (@humbyrds777)

    Andrew, they just refused to obey my css! Something about WP was over-riding it, even Firebug revealed no clues. Also noteworthy is that postion:relative; mucked up the works.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Align Images Horizontally’ is closed to new replies.