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

Question

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

我已尝试使用 .wrapper 显示表和 .img-wrap，.content-wrap 显示表-cell 在桌面上运行良好但是当涉及到移动时，每个组件框必须在顶部有图像，下面的内容。 Click here for Jsfiddle Attempt: 2 code Link

我的愿望结果是获得尝试2（桌面）和尝试1（移动设备）的结果。如果可能，最好使用相同的html布局 - 尝试1 HTML。

  

更新

     

我尝试了一种不同的方法（链接如下）我从CSS Tricks发现了我认为它确实垂直居中但是在我开始添加更多文字内容之后它没有＆ ＃39; t了。有谁知道为什么？

     

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