Horizontal centering for dual elements inside a div

Question

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,

Answer 1

justify-content:center; add this style to picturetalk

Please try this

.picturetalk {
    display: flex;
    align-items: center;    
    background-color: #fff;
    border: 1px solid #000;
    justify-content:center;
    color:#515256;
}

    <div class="picturetalk">
        <div>
            <img class="style-svg" src="https://i.sstatic.net/XU28O.png" />
        </div>
        <div>
            <em>"Strange object array imaged parallel to star field Clius 3"</em>
        </div>
    </div>

For align both horizontally and vertically using d-flex this three are neccessary.

display: flex;
align-items: center;
justify-content:center;