使用 CSS 垂直对齐文本答案

【问题标题】：Vertically Aligning Text Using CSS使用 CSS 垂直对齐文本
【发布时间】：2013-09-04 15:40:34
【问题描述】：

在下面的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>

【问题讨论】：

使用line-height 属性。尝试将其值设置为等于页脚的高度。它只适用于内联元素，对于你需要使用边距的块元素。
这可能会有所帮助deeson-online.co.uk/labs/…
如果由于某种原因line-height 不是一个选项（由该高度创建的垂直空间不可clicable），请使用padding 作为元素。或者定义元素的height。请记住将其设为display:block 或display:inline-block

标签： css html layout css-float

【解决方案1】：

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

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

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

在您的页脚中添加 clearfix 类

【讨论】：

【解决方案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/查看

【讨论】：

【解决方案3】：

试试这个

在这个例子中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>

【讨论】：