Skip to content
Grav 2.0 is officially stable. Read the announcement →
Themes & Styling

How to align multiple images horizontally?

Started by Plumf 6 years ago · 2 replies · 3107 views
6 years ago

I would like to take advantage of the discussion to ask a second question. Do you know how to line up pictures like this:

capture_grav2|690x215

6 years ago

Cause even if I put them in aligned notation Grav the overlays like this:

MARKDOWN
![](image://laptop.png?cropResize=,200) ![](image://desktop.jpg?cropResize=,200) ![](image://nettop.jpg?cropResize=,200)

capture_grav1|297x500

6 years ago

@Plumf, An <img> element is an 'inline' element and should therefor position itself on the same line, unless the containing element isn't wide enough and forces the images to wrap. Or some css might influence the layout.

The Markdown code you use will generate html similar to:

HTML
<p>
  <img alt="" src="/images/9/3/4/f/d/934fd3ab7bd7425654....jpeg">
  <img alt="" src="/images/9/3/4/f/d/934fd3ab7bd7425654....jpeg">
  <img alt="" src="/images/9/3/4/f/d/934fd3ab7bd7425654....jpeg">
</p>

Questions:

  • Which theme are you using?
  • What does your generated HTML look like?
  • What css are you using?
👍 1
last edited 05/11/20 by pamtbaau

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by stuart young, 2 weeks ago
3 251 2 weeks ago
Themes & Styling · by Sebadamus, 3 weeks ago
5 317 3 weeks ago
Themes & Styling · by martynfoster735, 4 weeks ago
1 310 4 weeks ago
Themes & Styling · by Justin Young, 1 month ago
1 348 1 month ago
Themes & Styling · by Slebeig, 2 months ago
4 474 2 months ago