html - 在浏览器调整大小时，使用媒体查询将文本直接堆叠在图像下方

Question

因此，我有一些文本位于我文档的页脚 区域内图像的旁边(右侧 float )。当我将浏览器的大小调整为 min-width:768px 时。

我试图让文本和图像都居中对齐，并且图像位于文本上方，但我似乎做不到。所发生的只是图像缩小为一个点，并且都没有重新对齐。

这是我想要实现的目标的示例，以及我现有的代码:

HTML :

<div id="wrapper">
    <footer id="page_footer">
       <p>Thanks for visiting</p>
         <a href="#" target="_blank"><img alt=
        "nffc_logo" src="images/logo.png"></a>
    </footer>
</div><!-- wrapper -->

---

CSS :

 #page_footer {    
     width: 100%;
     height: auto;
     position: absolute;
     bottom:0;     /*sticky footer*/
     left: 0;  
     background: #282828;
     color: white;
}
#page_footer img {
     max-width: 3%;
     height:auto;             
     margin: 5px;
     float:right;                               
}             
#page_footer p {
     float:right;
     margin-right: 10px;
     margin-left: 1px;             
}

---

然后是一个空的媒体查询:

@media screen and (min-width:768px) {  }

Answer 1

我已经为链接和段落添加了一个额外的容器，.right-div 并使其成为 float: right; 所以你不需要 float 它 child ( p 和 a )。它们只需要显示为内联 block ，并具有宽度或最大宽度以便更好地定位。

请注意，我已将样式应用到 a，而不是 img

所以这里是 DEMO