Css与页脚中的文字和图像对齐问题

问题描述：

我有一个页脚，其中包含文本和Facebook图像。出于某种原因，我无法直接在文本右侧获取Facebook图标。

有人可以帮我吗？

<div id="footerwrap"> 
    <div id="footer"> 
     <div class="copyright">2014 - 2015 <span class="bar">|</span>www.website.com<span class="bar">|</span>Created by <a href="http://www.website.com" target="_blank">website</a><span class="bar">|</span> 
      <ul> 
       <li><a href="https://www.facebook.com" target="_blank" title="Facebook"><img src="http://www.commuwise.nl/wp-content/uploads/facebook.png" /></a> 
       </li> 
      </ul>Like us on Facebook!</div> 
    </div> 
</div>

而CSS：

#footerwrap { 
    width: 1000px; 
    float: left; 
    margin: 0 auto; 
    clear: both; 
} 
#footer { 
    height: 30px; 
    background: #33FF66; 
    border-radius: 10px; 
    border: 1px solid #1feb52; 
    margin: 0px auto; 
    text-align: center; 
    color:#FFF; 
} 
#footer a { 
    color:#FFF; 
    text-decoration:none; 
} 
#footer a:hover { 
    color:#FFF; 
    text-decoration:underline; 
} 
#footer a:visited { 
    color:#FFF; 
    text-decoration:underline; 
} 
.bar { 
    font-size: 15px; 
} 
#footer .copyright ul { 
    list-style: none; 
    margin: 0px 0px 0px; 
    padding: 3px; 
    float:right; 
    margin-left:5px; 
} 
#footer .copyright img { 
    border: 0px; 
} 
#footer .copyright { 
    color: #fff; 
    line-height: 32px; 
    margin-left: 5px; 
    margin-top: 0px; 
    text-align: center; 
}

谢谢！最好的问候

非常感谢很多家伙！显示：内联块是答案！ – user3411054

有没有什么办法可以使用v-align？或者我可以用任何其他方式垂直对齐一切？ – user3411054

答

这里是一个js.fiddle：http://jsfiddle.net/DSrn4/1/

在你的CSS代码，

#footer .copyright ul { 
    list-style: none; 
    margin: 0px 0px 0px; 
    padding: 3px; 
    display:inline-block; 
    margin-left:5px; 
}

删除：浮动：权利; 新增：display：inline-block;

关于垂直对齐的问题。你可能想重新考虑你的html结构。一个简单的解决方案是{display：table-cell; vertical-align：top;}垂直对齐是用于表格数据。有关CSS技巧的一篇很棒的文章讨论了这个深度。 http://css-tricks.com/what-is-vertical-align/ – JosephMCasey

答

Try this jsfiddle

<div id="footerwrap"> 
    <div id="footer"> 
     <div class="copyright"> 
    2014 - 2015 <span class="bar">|</span>www.website.com<span class="bar">|</span>Created by <a href="http://www.website.com" target="_blank">website</a><span class="bar">|</span>Like us on Facebook!<a href="https://www.facebook.com" target="_blank" title="Facebook"><img src="http://www.commuwise.nl/wp-content/uploads/facebook.png" /></a> 

     </div> 
    </div> 
</div>

答

这是你如何想它是什么？ Working Fiddle

#footer .copyright ul { 
list-style: none; 
margin: 0px 5px; 
padding:0 3px; 
float:right; 
} 
#footer .copyright ul li a{ 
display:block; 
margin:0; 
padding:0; 
} 
#footer .copyright ul li a img{ 
display:inline-block; 
vertical-align:top; 
padding-top:3px; 
}

Css与页脚中的文字和图像对齐问题

相关推荐