Question

我的网站需要根据屏幕尺寸移动h3。

html目前是这样的表：

<table><tr><td><img src="someimage"></td><td><h3>Heading</h3></td></tr></table>

在较小的屏幕上，我希望h3出现在图像上方，图像全宽，所以我从：

开始

<div class="heading-image">
<h3>Heading</h3>
<img="someimage">
</div>

这只是有效，但在较大的屏幕上，我希望h3下降到图像的右侧，这将是屏幕的50％：

.heading-image img { max-width: 50% };
.heading-image h3 { max-width: 50%; float:right };

现在h3在右侧的图像旁边下降。但接下来是一个古老的问题，垂直将div中的多行文本居中，其中div的高度未知（取决于图像的大小和当前的屏幕宽度），文本的长度未知（将这些文本输入CMS）。

我尝试过在互联网上找到的各种方法，但我只是没有理解它。我尝试同时使img和h3成为table-cell让我回到原来的方法，但我无法让对齐工作。

enter image description here

Answer 1

这是代码。只需在@ media-query中更改要折叠的大小。

工作小提琴：http://jsfiddle.net/Hv6x3/

<强> HTML

<div class="heading-image">
    <h3>Headline text goes here...</h3>
    <img src="http://placeimg.com/640/480/tech" alt=""/>
</div>

<强> CSS

.heading-image img { 
    float: left;
    max-width: 50%;
    height: auto;
}
.heading-image h3 { 
    float: right;
    width: 50%;
    max-width: 50%; 
    text-align: left;
}

@media (max-width: 600px) {
    .heading-image {
        text-align: center;
    }
    .heading-image img { 
        float: none;
        max-width: 100% 
    }
    .heading-image h3 { 
        float: none;
        max-width: 50%; 
    }
}

Answer 2

for vertical-align ....使用display:table-cell

确保将父div设置为display:table

jsfiddle demo

 html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
@media only screen and (min-width : 600px) {
    .heading-image {
        width:100%;
        height:100%;
        margin:0;
        padding:0;
        text-align:center;
        display: table;
    }
    .heading-image .img {
        float:left;
        height:100%;
    }
    .heading-image .h3 {
        float:right;
        display: table;
        height:100%;

    }
    .heading-image .h3 h3 {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
}
@media only screen and (max-width : 600px) {
    .heading-image {
        width:100%;
        margin:0;
        padding:0;
        text-align:center
    }
    .heading-image .img {
        width: 100%;
    }
    .heading-image .img img {
        width:auto;
        height:auto;
    }
    .heading-image .h3 {
        width: 100%;
        vertical-align:middle;
    }
}

媒体查询将向右移动图像

2 个答案: