Center text vertically next to image

Tstorm · August 21, 2015

I tried searching, but didn't see anything that fit what I'm wanting. So here goes....

I have two columns in a row. The left column has an image. The right column has some text. I'd like the text to be centered vertically so that it's always aligned with the center of the image. I know I could just adjust the upper margin but, since the image size adjusts with the size of the browser window, I'd like something more dynamic. I feel the answer is with some CSS, but that single block of text has so many divs surrounding it, I don't know which one to tweak.

Here's the page in question: http://www.jacobmast.net/Other-Projects/Software/Simply-Square I'd like the "Marketing Text" to be centered next to the devices.

Allen · August 21, 2015

I don't think you can do this using the text widget. You'd have to set a height to equal the image
widget and I don't think it would resize with browser resizing.

Maybe using an HTML widget with a table and the right cell is vertically aligned center.
<td style="vertical-align:center"> or <td valign=center>

You'd have to add CSS so the image resizes.

img {
     max-width: 100%;
     height: auto;
     width: auto\9; /* ie8 */ 
}

Tstorm · August 22, 2015

Center text vertically next to image
I've tried a HTML box with the table idea, and it works as long as I specify a height. But, since I don't know the height in the image, typing something in is essentially the same as specifying the top margin for the text widget.

This page is supposed to be something quick and simple, and if it's going to be as involved as writing the body as full HTML/CSS, well I'm sure there's another design I could come up with for that page that'll mostly be just drag and drop.

Then again, I might get bored later and keep messing with it. Who knows.

Anyways, thanks!

Center text vertically next to image

Comments