Html 媒体查询将标题移动到图像右侧

我有一个网站需要根据屏幕大小移动

h3

html当前是如下所示的表：

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

现在h3下降到右侧图像的旁边。但随后又出现了一个由来已久的问题：div中的多行文本垂直居中，div的高度未知（取决于图像的大小和当前屏幕的宽度），文本的长度未知（输入CMS）

我已经尝试了在互联网上找到的各种方法，但我只是不了解它。我试图使

img

和

h3

都成为

表格单元格

，以使我回到我原来的方法，但我无法使对齐工作正常进行

---

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

工作小提琴：

HTML

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

---

对于垂直对齐…使用

display:table cell

确保父div设置为

display:table

---

你想垂直还是水平居中对齐？@Anup抱歉，伙计们，我遗漏了一个关键的词：垂直。@Paul：你想根据屏幕宽度改变布局……这听起来确实像是

媒体查询

的事情…@NoobEditor是的，一旦我弄明白了，我会创建媒体查询（在帮助下）如何让布局正常工作。@Paul:mmmmm…我的英语很差…你需要帮助定义布局吗？？）谢谢乔-我想我最初的问题没有提到“垂直对齐”部分，这很愚蠢，因为这是最主要的问题。

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

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

.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%; 
    }
}

 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;
    }
}