对齐居中列中的元素

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