1

在下面的HTML中，为什么所有内容都出现在 之外<footer>，为什么文本没有垂直居中对齐？

<html>

    <head>
        <style>
            body {
                margin-left: 20%;
                margin-right: 20%;
            }
            footer {
                text-align: center;
                border: 1px dotted black;
            }
            #foo {
                float: left;
                vertical-align: middle;
            }
            #bar {
                float: right;
            }
        </style>
    </head>

    <body>
        <footer> <span id="foo">this is some text</span>
 <span id="bar"><img src="http://i.imgur.com/wgFpmlN.png"></span>

        </footer>
    </body>

</html>
4

3 回答 3

0 
<body>
<footer>
    <span id="foo">this is some text</span>
    <span id="bar"><img src="http://i.imgur.com/wgFpmlN.png"></span>
    <br clear />  <!-- you need to put clear here or do that with css-->
</footer>
</body>

您可以在http://jsfiddle.net/yGPKF/1/查看

于 2013-09-01T11:20:11.540 回答
0

这是因为您有浮点数并且没有块或内联元素，请查看clearfix hack。或者我不知道它是否真的被认为是黑客攻击。

如果您真的不想阅读，只需将其添加到您的 css

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

Amdclearfix在页脚中添加一个类

于 2013-09-01T11:13:58.310 回答
0

尝试这个

在这个例子中， footerhasheight和#foohasline-height两者都是一样的。

 body {
   margin-left: 20%;
   margin-right: 20%;
 }
 footer {
   text-align: center;
   border: 1px dotted black;
   height: 100px;
 }
 #foo {
   vertical-align: middle;
   line-height: 100px;
 }
 #bar {
   vertical-align: middle;
   display: inline-block;
 }
<footer> <span id="foo">this is some text</span>
  <span id="bar"><img src="http://i.imgur.com/wgFpmlN.png"></span>

</footer>

于 2014-09-25T10:55:56.360 回答