在CSS中使用vertical-align是什么？ [英] What is vertical-align used for in CSS?

问题描述

我是编程世界和CSS的新手，最近遇到了vertical-align属性。阅读了一些文章，它是什么，我仍然不知道它是什么，你什么时候使用它？

我的理解是，它用于内联元素，如文本，图像等，以及文本或表中的其他内联元素。它们不能用于块元素，如div，h1等。

如果我的理解是正确的，除了垂直对齐文本来说图像或使用下标或上标

解决方案

• 您想要了解特定媒体资源：
  
  http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align




• 常见用例是垂直居中（结合 display：table-cell ）：

  
  
  

  http://jsfiddle.net/7eTb2/

    div {
   background：#ccc; 
   width：200px; 
   height：300px; 
   padding：5px; 
   
   display：table-cell; 
   vertical-align：middle 
  } 
    

另一个常见的用例是当它涉及到 inline code> inline-block 。

在这里查看不同 vertical-align 值发生的情况：
http://www.brunildo.org/test/inline-block.html



• 另一个可以阅读的好链接： http://css-tricks.com/what-is-vertical-align/

但是， 正在使我获得upvote，请参阅：

• http://stackoverflow.com/search?tab=votes& q = user％3a405015％20％22vertical-align％3a％20top％22

：）

I am new to the world of coding as well as CSS and recently came across the property vertical-align. Having read a number of articles on what it is, I am still clueless on what it is for and when do you use it?

My understanding is that it is used for inline elements such as text, images, etc as well as text or other inline elements in a table. They cannot be used for block element such as div, h1, etc.

If my understanding is right, apart from aligning text vertically to say an image or using subscript or superscript, what other purpose does it serve?

解决方案

• It's always worth reading the specs if you want to learn about a specific property:
  http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

• A common use case is vertical centering (in combination with display: table-cell):

  http://jsfiddle.net/7eTb2/

  div {
      background: #ccc;
      width: 200px;
      height: 300px;
      padding: 5px;
  
      display: table-cell;
      vertical-align: middle
  }
  

  It's somewhat difficult to vertically center without using this technique.

• Another common use case is when it comes to elements that are inline or inline-block.
  See here for examples of what happens with different vertical-align values: http://www.brunildo.org/test/inline-block.html

• Another good link to read: http://css-tricks.com/what-is-vertical-align/

However, it's real use is getting me upvotes, see:

• http://stackoverflow.com/search?tab=votes&q=user%3a405015%20%22vertical-align%3a%20top%22

:)

这篇关于在CSS中使用vertical-align是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！