垂直對齊

HTML垂直對齊

<html> 
    <head> 
     <style type="text/css"> 
      div { 
       height: 300px; 
       width: 300px; 
       background-color: aqua;  
       margin-bottom: 10px; 
      }   
      div > span {     
       vertical-align: middle; 
       background-color: orange;    
       font-size: 3em; 
      }  
     </style> 
    </head> 
    <body>   
     <div>   
      <span>Hello!</span> 
     </div>   
    </body> 
</html>

在下面的圖像，實際是什麼上述HTML呈現，和預期是我所需要的佈局。

應該以這種方式工作的CSS屬性vertical-align？

編輯：

這個問題是不是重複，我想了解的vertical-align: middle行爲與inline元素。在上面的例子中，保留或刪除上述屬性值對HTML佈局沒有影響。

EDIT2：的demo在意見建議duplicate問題的最多的回答提出的標題爲「一個更通用的方法」下，呈現在我的瀏覽器不同的佈局。我正在運行Google Chrome版本47.0.2526.106（64位）。

下面是如何看起來在我的瀏覽器（從什麼樣子的演示環節上有所不同）一snaphsot：

在下面的圖片中，span元素被粘在上面。

來源

2016-02-22 Bharat Khatri

請參見[垂直對齊無法在內聯塊中工作]（http://stackoverflow.com/q/35529582/1529 630）知道**爲什麼** vertical-align：middle不是居中在包含塊的中間，[如何將文本垂直居中放置在div中，用CSS？]（http://stackoverflow.com/q/8865458/1529630）知道**你是如何做到的。 – Oriol

關於您的第二次編輯，我無法在Firefox 47和Chromium 50上重現該內容。如果您真的可以重現該內容，並且想知道它是否是錯誤，是否已修復等問題，請提出一個新問題。 – Oriol

vertical-align將內聯元素相互對齊，但不會將它們放置在其容器中。

所以，例如，如果你在同一div有較高vertical-align: middle內聯元素，「你好」，將居中相對於它：

div { 
 
    height: 300px; 
 
    width: 300px; 
 
    background-color: aqua; 
 
    margin-bottom: 10px; 
 
} 
 
div > span { 
 
    vertical-align: middle; 
 
    background-color: orange; 
 
    font-size: 3em; 
 
} 
 
.big { 
 
    font-size:200px; 
 
}

<div> 
 
    <span>Hello!</span> 
 
    <span class="big">B</span> 
 
</div>

有定心用幾種技術文本垂直在一個容器中，但這不是一個 - 請參見How do I vertically center text with CSS?

來源

2016-02-22 22:55:31 CupawnTae

https://jsfiddle.net/x0gc91ch/1/

添加line-height: 300px

的DIV + CSS，因爲你試圖對齊到默認的行高度的中間，這是不一樣的父母一樣高DIV。

來源

2016-02-22 22:44:28 Sanova

回答

相關問題