html - 在居中列中对齐元素

Question

我有一篇文章，其文本位于页面中央，宽度为 910 像素。

我的代码是:

section {
    max-width: 910px;
    position: relative;
    margin: 0 auto;
    margin-bottom: 0;
    padding: 0;
}

现在对于图片，我想添加向左浮动的图片，并在右侧添加说明(垂直居中):

我尝试了以下 html:

<div class="alignSide">
    <div class="leftRow"></div>
    <div class="middleRow"></div>
    <div class="rightRow"></div>
</div>

这是一个例子:https://jsfiddle.net/5sueow8o/

但不知何故，它并没有成功。两个外部 div 太大了。可以看到蓝色的div没有和上面的<section>对齐.

有没有办法用 flexbox 来做？

Answer 1

考虑对您的 section 元素进行这些调整:

HTML(无变化)

CSS

body {
    display: flex;               /* establish flex container */
    flex-direction: column;      /* stack flex items vertically */
    align-items: center;         /* center flex items horizontally */
}

section {
    max-width: 500px;
}

section img {
    width:100%;
}

现在蓝色的 div 与上面的 section div 完美对齐。

Revised Demo