Center text vertically next to image

TstormTstorm Registered Users Posts: 19 Big grins
edited August 22, 2015 in SmugMug Customization
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.

Comments

  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited 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 */ 
    }
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • TstormTstorm Registered Users Posts: 19 Big grins
    edited 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!
Sign In or Register to comment.