垂直對齊文本使用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

回答

相關問題