附近图像

垂直居中的文字我希望我的页脚看起来像这样http://i.imgur.com/yZaDZyj.png 附近图像

目前，它看起来像这样：http://i.imgur.com/g6VNaV9.png

我的形象是不固定的，我想“感谢我们的朋友”是近图像中间，就像上面的例子。

另一个问题是当我调整页面大小时，页脚中的所有文本都从div退出。

代码：

#footer { 
 
    background-color: #3f4951; 
 
    display:block; 
 
    margin:0 auto; 
 
    width:100%; 
 
} 
 

 
section { 
 
    display:block; 
 
} 
 

 
.row { 
 
    margin:0 auto; 
 
    width:100%; 
 
} 
 

 
.footer-top { 
 
    padding: 37px 0 38px; 
 
} 
 

 
.column { 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
} 
 

 
.footer-top nav { 
 
    float: left; 
 
    margin: 0; 
 
    max-width: 60%; 
 
    text-align: left; 
 
} 
 

 
.footer-top nav a { 
 
    color:#a9abad; 
 
} 
 

 
.footer-top .thanks {   
 
    margin-left:200px; 
 
    float:left; 
 
    max-width: 35%; 
 
    width: 250px; 
 
} 
 

 
.thankstext { 
 
    color:#a9abad; 
 
    font-size: 16px; 
 
} 
 

 
.footer-top * { 
 
    color:#a9abad;   
 
} 
 

 
.footimage { 
 
}

<div id="footer"> 
 
    <section class="footer-top"> 
 
     <div class="row"> 
 
      <div class="column small-12"> 
 
       <nav> 
 
        <a>New or Existing Home Installation |</a> 
 
        <a href="#">Flushing |</a> 
 
        <a href="#">Serivicing |</a> 
 
        <a href="#">Service3 |</a> 
 
        <a href="#">Service4 |</a> 
 
        <a>All Services will be listed here.</a> 
 
       </nav> 
 
       <div class="thanks"> 
 
        <div class="thankstext">Thanks our friends at</div> 
 
        <img class="footimage" src="footimage.png"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </section> 
 
</div>

来源

2016-09-26 EdiD' s Channel

也许你需要一个'明确：both'以确保包含div完全包裹的内容。你有浮动的元素，这意味着他们不再是（某些）文档定位/大小计算的一部分。 –

@ EdiD的你可以给你的网站网址，上面的代码不显示页脚正确。 –

这真的是2个问题之一。你可以编辑它只要求一个问题，然后在另一个帖子中询问另一个问题？否则，这个问题将被关闭，因为它的一半是重复的，然后另一半不会得到回答。 –

工作小提琴：https://jsfiddle.net/z5wbxzzo/1/

#footer { 
    background-color: #3f4951; 
    display:block; 
    margin:0 auto; 
    width:100%; 



} 
section{ 
    display:block; 
} 
.row { 
    margin:0 auto; 
    width:100%; 
} 
.footer-top{ 
    padding: 37px 0 38px; 
} 
.column { 
     padding-left: 20px; 
    padding-right: 20px; 
} 
.footer-top nav { 
    float: left; 
    margin: 0; 
    max-width: 60%; 
    text-align: left; 
} 
.footer-top nav a { 
    color:#a9abad; 
    display: inline-block; 
} 
.footer-top .thanks { 
    float:right; 
    max-width: 35%; 
    width: 250px; 
} 

.thankstext { 
color:#a9abad; 
    font-size: 16px; 

} 
.footer-top* { 
    color:#a9abad; 

} 

.footer-top .thanks * { 
    display: inline-block; 
}

来源

2016-09-26 15:51:54

回答

相关问题