html - 如何首先将图像居中，然后在该图像的任一侧垂直居中放置文本？

Question

我想做两件事:

1. 将图像水平居中放置在页面上。
2. 在图片的两面写上文字。
   • 在右侧，文本应左对齐，在左侧，文本应右对齐。
   • 每个文本 block 都应相对于图像垂直居中。

这是我目前得到的代码，但我无法让它正常工作:

<div>
    <div style="vertical-align: middle; float: left; text-align: right;">
        <strong style="font-size: large;">Credentials</strong>
        <ul>
            <li>dsadsad</li>
            <li>cxzcxzc</li>
            <li>hgfhgfhg</li>
            <li>uytuty</li>
            <li>eqwewqeqwewq</li>
        </ul>
    </div>

    <div style="text-align: center; display: inline-block;">
        <a href="https://i.imgur.com/XIlpRN5.jpg"><img style="height: 400px; width: auto;" src="https://i.imgur.com/XIlpRN5.jpg" /></a>
    </div>

    <div style="vertical-align: middle; float: left; text-align: left;">
        <strong style="font-size: large;">Likes</strong>
        <ul>
            <li>dsadsadsa</li>
            <li>cxzcxzc</li>
            <li>gdgfdgfdgdf</li>
            <li>jhjghjhgj</li>
            <li>ouioiuoiuo</li>
            <li>..,m/.m,.m,</li>
            <li>opupoiuyuyi</li>
            <li>adsaeqw421312</li>
            <li>4356436546</li>
        </ul>
    </div>
</div>

我该如何解决这个问题才能达到我想要的效果？谢谢!

Answer 1

这是一种在父元素上使用 display flex 的方法。

.row {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.clear {
    clear:both;
}
.clear:before, .clear:after {
    content:"";
    display:table;
}
.clear:after { clear:both; }
.column {
    float: left;
    width: 33.333%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    text-align: center;
}
.column img {
    max-width: 100%;
}
.column:first-of-type {
    text-align: right;
}
.column:last-of-type {
    text-align: left;
}

<div class="row clear">
    <div class="column">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae magnam distinctio vel necessitatibus vero quaerat soluta ducimus, amet minima consequuntur nulla! Inventore maiores suscipit minus animi corporis porro illo quaerat!</p>
    </div>
    <div class="column">
        <img src="http://i.imgur.com/I9QJ2wP.png">
    </div>
    <div class="column">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae magnam distinctio vel necessitatibus vero quaerat soluta ducimus, amet minima consequuntur nulla! Inventore maiores suscipit minus animi corporis porro illo quaerat!</p>
    </div>
</div>