Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #25846

    Hi guys-

    I can’t seem to make vertical-align work in the template. The items at the top of this sidebar, for instance… are currently being handled with columns and margins… so the type is vertically centered next to the graphic… and so when it uses a narrower width at different media queries, and the type breaks to two lines, the top line of type stays centered, while the second line stays flush left with it… ish.

    http://djdevelopment.net/3/

    Have tried both the align=”absmiddle” and align=”middle” variations with no luck. And wondering how, if I wrote some CSS, it may work if it’s not working inline. Can you give me some guidance?

    Thanks!

    #128397

    Hi mgma,

    Vertical middle is unfortunately a complete mess with css. It largely doesn’t work and requires a lot of fine tuning to get right. See: https://www.google.com/search?q=verticle+middle+with+css&rlz=1C1CHFX_enUS533US533&oq=verticle+middle+with+css&aqs=chrome.0.57j60j65l3j0.2900j0&sourceid=chrome&ie=UTF-8

    Regards,

    Devin

    #128398

    I have found that if you standardise your image heights, you can use the following CSS in your child theme.

    /* Vertically aligning text to center of images that are 300px tall
    
    */
    .vertically-centered {
    display: table-cell;
    vertical-align: middle;
    width: 1000px;
    height: 300px;
    }

    Your text block then needs to reference this with div class="vertically-centered"

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Trying to use Vertical Align….’ is closed to new replies.