Question

有人可以解释vertical-align。我这里有几个例子，有vertical-align：top / bottom / middle 我对他们的位置感到困惑。我没有找到对垂直对齐的正确理解。请帮我解决这个问题

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

由于

Answer 1

首先，我建议你在css中使用vertical-align而不是HTML标签。
~~接下来，Vertical-align将您的文本或img ...放置在父标记内的任何元素，以根据父元素的实际高度来设置它。~~

嗯，我误解了它，
对于vertical-align，它将元素放在父元素的基础上，除了max的高度之外的所有元素。
它影响这个元素的其他兄弟，如文本或所有内联样式（内联 - *也）。

从我们阅读的文章中，它们只是放置文本。

该文章提及

不幸的是，vertical-align不适用于块级元素，如div中的段落。

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

使用内联样式使其站在一条线上，所以现在该元素有自己的高度比较：before或：after。

您可以在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>

关于垂直对齐（CSS）的困惑

1 个答案:

该文章提及