div内双元素的水平居中

Question

能够并排放置图像和文本，以使它们垂直对齐，但是如何将整个拍摄匹配水平居中对齐。已经在“ picturetalk” div中尝试了“ text-align：center”。

<?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;
}

输出：

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

谢谢

Answer 1

justify-content:center;将此样式添加到图片对话

请尝试

.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.stack.imgur.com/XU28O.png" />
        </div>
        <div>
            <em>"Strange object array imaged parallel to star field Clius 3"</em>
        </div>
    </div>

要使用d-flex进行水平和垂直对齐，这三个是必需的。

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