垂直对齐内容与浮动元素 + 响应式布局

Question

我有一个左/右图像的组件框布局 + 内容需要垂直居中对齐。它需要在顶部图像+底部内容的布局中响应移动设备。 Click Here for Jsfiddle Attempt: 1 Code Link

我试过 .wrapper 显示 table 和 .img-wrap, .content-wrap 显示 table-cell 在桌面上运行良好，但在移动设备上，每个组件框必须在顶部有图像，在下面有内容。 Click here for Jsfiddle Attempt: 2 code Link

我希望得到的结果是尝试 2（桌面）和尝试 1（移动）的结果。如果可能的话，最好对两者使用相同的 html 布局 - 尝试 1 HTML。

更新：

我尝试了一种从CSS Tricks 找到的不同方法（链接如下），我认为它确实垂直居中，但在我开始添加更多文本内容后它不再起作用。有谁知道为什么？

Click here for Jsfiddle Attempt: 3 code Link

HTML - 尝试 3

<div class="wrapper">
    <div class="img-wrap left">
        <img src="http://lorempixel.com/400/400/" alt="" />
    </div>
    <div class="content-wrap">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ... Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div></p>
    </div></p>
    </div>
</div>
<div class="wrapper">
    <div class="img-wrap right">
        <img src="http://lorempixel.com/400/400/" alt="" />
    </div>
    <div class="content-wrap">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
</div>

CSS- 尝试 3

* {
    box-sizing: border-box;
}
.wrapper:before, .wrapper:after {
    display: table;
    content:'';
}
.wrapper:after {
    clear:both;
}
.wrapper {
    width: 100%;
    height:auto;
    position :relative;
    max-width: 800px;
    display:block;
    margin: 30px auto;
    background: #f3f3f3;
    *zoom:1;
}
.wrapper:before {
    content:'';
    display: inline-block;
    vertical-align: middle;
}
.img-wrap {
    width:30%;
}
.left {
    float:left;
}
.right {
    float: right;
}
.img-wrap img {
    display:block;
    width: 100%;
}
.content-wrap {
    display: inline-block;
    width: 70%;
    height: 100%;
    padding:20px;
    vertical-align:middle;
    position: relative;
}
.content-wrap:before {
    content:'';
    display: inline-block;
    vertical-align: middle;
}
@media screen and (max-width:480px) {
    .right, .left {
        float:none;
    }
    .wrapper:before {
        display: none;
    }
    .img-wrap {
        width: 100%;
    }
    .content-wrap {
        width:100%;
    }
}

Answer 1

我建议使用display:table来实现vertical-align：

css

* {
    box-sizing: border-box;
}
.wrapper:before, .wrapper:after {
    display: table;
    content:'';
}
.wrapper:after {
    clear:both;
}
.wrapper {
    width: 100%;
    height:auto;
    position :relative;
    max-width: 800px;
    display:table;
    margin: 30px auto;
    background: #f3f3f3;
    vertical-align:middle;
    *zoom:1;
}
.img-wrap {
    display: table-cell;
    text-align: left;
}
.left {
    float:left;
}
.right {
    float: right;
}
.img-wrap img {
    display:block;
    width: 100%;
}
.content-wrap {
    display: table-cell;
    width: 70%;
    height: 100%;
    padding:20px;
    vertical-align:middle;
    position:relative;
}
@media screen and (max-width:750px) {
    .right, .left {
        float:none;
    }
    .img-wrap {
        width: 100%;
    }
    .content-wrap {
        width:100%;
    }
}

fiddle