div 中双元素的水平居中

Question

能够并排放置图像和文本，使它们垂直对齐，但我如何才能将整个拍摄比赛水平居中对齐。已在 'picturetalk' div 中尝试“文本对齐：居中”。

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

请试试这个

.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;

div 中双元素的水平居中

Horizontal centering for dual elements inside a div

alignment