Horizontal centering for dual elements inside a div

  • Resolved ratamatcat

    (@ratamatcat)


    4 years, 7 months ago

    hi,

    Was able to place an image and text side by side so they are aligned vertically, but how can I align the whole shooting match horizontally centered. Tried ‘text-align: center” in the ‘picturetalk’ div already.

    <?php if( get_field('picturetalk') ): ?>
    <div class="picturetalk">
        <div>
            <img class="style-svg" src="/wp-content/uploads/2020/07/speech-bubble.svg" />
        </div>
        <div>
            "<em><?php the_field('picturetalk_content'); ?></em>"
        </div>
    </div>
<?php endif; ?>
    .picturetalk {
    display: flex;
    align-items: center;    
    font-size: larger;
    background-color: #fff;
    border: 1px solid #000;
}

    The output:

    https://drive.google.com/file/d/1-ojCcfeUQpJQFDQVIR_w4UfNahHVRoX2/view?usp=sharing

    Thanks,

    The page I need help with: [log in to see the link]

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

  • It would be good to have website URL with that I can easily suggest proper CSS to fix this.

    Adding justify-content: center; should give you the result you want.

    Thread Starter ratamatcat

    (@ratamatcat)

    Naveen it’s hidden under development so I don’t think I could put a password here. FYI The domain is in the link field above it will have graphic imagery and illustrations etc. One day it will be up.

    Jacob that did it perfectly.

    Great!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Horizontal centering for dual elements inside a div’ is closed to new replies.