css - 关于垂直对齐 (CSS) 的困惑

Question

谁能解释一下垂直对齐。我这里有几个例子，垂直对齐:顶部/底部/中间我对他们的位置感到困惑。我没有找到对垂直对齐的正确理解。请帮助我

http://www.htmlandcssbook.com/code-samples/chapter-05/aligning-images-vertically.html

谢谢

Answer 1

首先，我建议您在 css 而不是 HTML 标签上使用垂直对齐。
接下来，Vertical-align 是将您的文本或 img...放置在父标签内的任何元素，以根据父元素的实际高度定位您在其上设置的位置。

嗯，我误会了，
对于垂直对齐，它会将您的元素放在除最大高度之外的所有元素的父标签内。
它会影响该元素的其他兄弟元素，例如文本或所有内联样式(inline-* 也一样)。

从我们阅读的文章来看，它们只是地方文本。

那篇文章提到

Unfortunately vertical-align doesn’t apply to block-level elements like a paragraph inside a div.

如果我们想在 div 标签内垂直对齐文本怎么办，我们已经为它们声明了元素的高度，这就是为什么我们使用 :before 或 :after 来设置 height: 100% 来满足元素父元素的高度。

使用内联样式使其站在一条线上，所以现在元素有自己的高度比较:之前或之后。

您可以在 W3C 上查看更多详细信息 vertical-align
下面是一个例子:

.box{
  height:150px;
  width: auto;
  background: pink;
  border: 1px solid black;
  }
.top-line{
  vertical-align: top;
}
.middle-line{
  vertical-align: middle;
}
.bottom-line{
  vertical-align: bottom;
}
.text_Valine:before{
  content:'';
  display:inline-block;
  height:100%; 
  vertical-align: middle;
}

<div class="box"> I'm <img class="top-line" src="http://www.htmlandcssbook.com/code-samples/chapter-05/images/bird.gif" alt=""> vertical-align top </div>
<div class="box"> I'm <img class="middle-line" src="http://www.htmlandcssbook.com/code-samples/chapter-05/images/bird.gif" alt=""> vertical-align middle</div>
<div class="box bottom-line"> I'm <img class="bottom-line" src="http://www.htmlandcssbook.com/code-samples/chapter-05/images/bird.gif" alt=""> vertical-align bottom </div>

<div class="box text_Valine">Only Valign text</div>