垂直对齐文本使用CSS

在下面HTML，为什么所有的内容出现在<footer>之外，为什么不垂直方向的中间对齐的文本？垂直对齐文本使用CSS

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

来源

2013-09-01 Simon Morgan

使用'线height'财产。尝试设置其值等于页脚高度。它只适用于内联元素，对于需要使用边距播放的块元素。 –

这可能是有用的http://deeson-online.co.uk/labs/how-centre-align-text-or-content-vertically-css – zdesam

如果因为某些原因，“行高”不是一个选项（垂直由该高度创建的空间不是可选的），使用'padding'作为元素。另外定义元素的“高度”。只要记住将其设置为“display：block”或“display：inline-block”即可 –

这是因为你有花车，没有块或内联元素，看看在clearfix黑客。或者我不知道它是否真的被认为是黑客。

如果你真的不觉得读书只是添加到您的CSS

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

的AMD添加clearfix类页脚

来源

2013-09-01 11:13:58

<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-01 11:20:11 zdesam

检查试试这个

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

来源

2014-09-25 10:55:56

垂直对齐文本使用CSS

回答

相关问题