div内双元素的水平居中

【问题标题】：Horizontal centering for dual elements inside a divdiv内双元素的水平居中
【发布时间】：2020-08-14 12:25:39
【问题描述】：

能够并排放置图像和文本，使它们垂直对齐，但是如何将整个拍摄匹配水平居中对齐。已经在“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

谢谢，

【问题讨论】：

标签： alignment

【解决方案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;

【讨论】：