Align 2 images

[JLius]

Hi all

How do I align 2 images, so they display in the center of the page, next to each other, with a little white space in between and a bit of explanatory text under each (like, 'this is an image of...')?

Many thanks!

[RbnJrg]

Originally Posted by JLius

Hi all

How do I align 2 images, so they display in the center of the page, next to each other, with a little white space in between and a bit of explanatory text under each (like, 'this is an image of...')?

Many thanks!

Use a table There are others methods but with a table you'll have the two images aligned practically in any ereader. Use the following code:

1. In your .xhtml file:

  <div class="images">
    <table cellpadding="5" cellspacing="0" class="images">
      <tr>
        <td style="width: 50%"><img alt="Image" src="../Images/leopard.jpg" />This is a leopard</td>

        <td style="width: 50%"><img alt="Image" src="../Images/leopard.jpg" />This one too!</td>
      </tr>
    </table>
  </div>

Of course, your images will be different

2. In your .css stylesheet:

div.images {
    width: 80%;
    margin-bottom: 1.5em;
    margin-left: 10%;
    page-break-after: avoid;
}

table.images {
    padding-top: 1em;
    margin: 0 !important;
    text-align: center;
    text-indent: 0 !important;
    font-weight: bold;
    font-size: 0.8em; /* Change this if you want */
    font-family: serif;
}

table.images tr td img {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

Here you have a screenshot of Sigil:



I also attach an epub file so you can understand better the things.

Regards

EDIT: You can style the table inside the .css stylesheet but don't erase cellpadding="5" cellspacing="0" (you can change the values, no problem with that) inside the table tag because otherwise the table won't show centered in ADE.

[JLius]

Thank you very much, RbnJrg!

[RbnJrg]

Originally Posted by JLius

Thank you very much, RbnJrg!

You are welcome

[theducks]

Remember to think 'Box Model". It is always there
Margin: places the box
Border: defaults to 0 and is invisible
Padding: spaces things away from the border, default 0
Content: Images or text

each is controllable

put padding around the images
color the background of the outer box (fill)\

'Boxing' can be fun

[JLius]

This 'boxing', should it be done in the 'table.images tr td img' ?

[theducks]

Originally Posted by JLius

This 'boxing', should it be done in the 'table.images tr td img' ?

Box(ing) is always done. That is just the way it works.
Tables are a way of stacking boxes (on shelves) with more precision

Tables, like boxes can also have their borders show.

It take a bit to wrap your head around boxes and their cascaded results.

I only scrape the basics of CSS. Thankfully, EPUB only supports the basics

[JLius]

I only scrape the * whatever 's lower than basics*

[HarryT]

Tables are easy. Just need something like:

<table>
<tr>
<td>This is the first cell</td>
<td>This is the second cell</td>
</tr>
</table>

Just replace the text with images.

[JLius]

yeah, that far I scrape, but this:

table.images {
    padding-top: 1em;
    margin: 0 !important;
    text-align: center;
    text-indent: 0 !important;
    font-weight: bold;
    font-size: 0.8em; /* Change this if you want */
    font-family: serif;
}

table.images tr td img {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

is like magic to me. I just copy paste it and am happy when it works.