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

Posted 2023-03-05

【中文标题】垂直对齐内容与浮动元素 + 响应式布局

【英文标题】：Vertical align content with float element + responsive layout

【发布时间】：2014-08-28 00:13:48

【问题描述】：

我有一个左/右图像的组件框布局 + 内容需要垂直居中对齐。它需要在顶部图像+底部内容的布局中响应移动设备。 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/"  />
    </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/"  />
    </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%;
    

【参考方案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

【讨论】：

如前所述，有两种不同的布局需要不同的图像定位来实现。并且图像需要始终位于移动视图的顶部，而内容则位于其下方。您建议的解决方案与我上面介绍的（尝试 2）非常相似，但这不是我想要的，抱歉。