Question

在以下 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>

Answer 1

因为你有浮动而且没有块或内联元素，所以看看clearfix hack。或者我不知道它是否真的被视为黑客攻击。

如果您真的不想阅读，请将此添加到您的CSS

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

Amd在页脚中添加clearfix课程

Answer 2

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

查看

Answer 3

试试这个

在此示例中，{p> footer有height而#foo line-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>

{{1}}

使用CSS垂直对齐文本

3 个答案: