垂直对齐

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

回答

相关问题