Menu icon Foundation
Centering images in a block-grid on Ink

I'm trying to do a two-up block grid and then centering the images that go in each element of the grid.

I've only just started doing HTML so I'm quite a newbie. Bear with me

Here's what I've done and the result of it. I just want the two images to both be on their side of the text.

<table class="row">
<tr>
<td class="wrapper last">
                        
    <table class="block-grid two-up">
    <tr >
                    <td><center><img src="http://placehold.it/100x50"><center></td>
                        <td><center><img src="http://placehold.it/100x50"></center></td>
    </tr>
</table>
        
</td>
</tr>
</table>

Screen shot 2015 04 02 at 2.42.14 pm

emailblock gridaligncenter

I'm trying to do a two-up block grid and then centering the images that go in each element of the grid.

I've only just started doing HTML so I'm quite a newbie. Bear with me

Here's what I've done and the result of it. I just want the two images to both be on their side of the text.

<table class="row">
<tr>
<td class="wrapper last">
                        
    <table class="block-grid two-up">
    <tr >
                    <td><center><img src="http://placehold.it/100x50"><center></td>
                        <td><center><img src="http://placehold.it/100x50"></center></td>
    </tr>
</table>
        
</td>
</tr>
</table>

Screen shot 2015 04 02 at 2.42.14 pm

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

There is some build in CSS for the image centering class:
HTML
<center>
<img class="center" src="http://placehold.it/125x125&text=Centered%20Image">
</center>

This in conjunction with the center tag makes it work.

Example:
http://codepen.io/rafibomb/pen/RPZgRZ

Julien Rath over 4 years ago

Ah right thanks. I figured it out but by taking out the float left in the img CSS. That seemed to do but this also worked.

Now is there any way to get it aligned to the bottom? I've tried valign but that doesn't seem to work. And I read that valign doesn't work with the block grid?

Rafi Benkual over 4 years ago

The CSS for a block grid is:

.block-grid td {
  display: inline-block;
  padding:10px;
}

It's no longer display: table; so vertical centering methods don't work. You can use padding-top instead.

Sound like you're better off using the regular grid for this.