在页脚中对齐文本和图像的 Css 问题答案

【问题标题】：Css Issues with alignin text and images in footer在页脚中对齐文本和图像的 Css 问题
【发布时间】：2014-04-16 17:54:44
【问题描述】：

我有一些问题：

我有一个页脚，里面有文字和 Facebook 图片。出于某种原因，我无法将 facebook 图标直接放在文本的右侧。

有人可以帮帮我吗？

here is a link to 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>
            <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;
}

谢谢！！最好的问候

【问题讨论】：

非常感谢大家！！ Display:inline-block 就是答案！
有什么方法可以使用 v-align 吗？或者任何其他方式我可以垂直对齐所有内容？

标签： css image text alignment footer

【解决方案1】：

这是一个 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;
}

删除：浮动：对；添加：显示：内联块；

【讨论】：

关于垂直对齐的问题。您可能需要重新考虑您的 html 结构。一个简单的解决方案是 {display:table-cell;vertical-align:top;} 垂直对齐适用于表格数据。有一篇关于 CSS Tricks 的精彩文章深入讨论了这一点。 css-tricks.com/what-is-vertical-align

【解决方案2】：

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>

【讨论】：

【解决方案3】：

这是你想要的样子吗？ 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;
}

【讨论】：