时间戳

首页 > 解决方案 > div内双元素的水平居中

alignment - div内双元素的水平居中

问题描述

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

解决方案

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;

推荐阅读