Question

我希望我的页脚看起来像http://i.imgur.com/yZaDZyj.png

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

我的图片不是固定的，我想要＆＃34;感谢我们的朋友们在＆＃34;靠近图像中间，就像上面的例子一样。

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

代码：

＆＃13;

#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 {
 }

＆＃13;

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

＆＃13;

Answer 1

工作小提琴：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;
}

垂直居中靠近图像的文本

1 个答案: