我不会“得到" vertical-align css属性 [英] I do not "get" the vertical-align css property

问题描述

我不知道vertical-align什么时候会起作用，什么时候不会起作用.

每次我碰到vertical-align的用例时，似乎都难以理解它是否会真正起作用.我知道它必须应用于内联元素.我读过我必须为通常不包含一个的元素指定一个line-height.我已经读过height属性必须具有静态(非自动/非％)值.我已经读到，如果某些(现代)浏览器所使用的元素自然不是内联元素，则它们将无法正确处理vertical-align.我不清楚vertical-align应该在包含元素(例如text-align)还是我想垂直对齐的元素上.

我创建了此jsfiddle 来尝试解决问题，但仍然存在糊涂了.

 #outer {
  box-sizing: border-box;
  border: red 1px solid;
  height: 200px;
  width: 400px;
  text-align: center;
}

#inner {
  border: blue 1px solid;
  display: inline-block;
  height: 200px;
  vertical-align: middle;
}
    
#header {
  border: green 1px solid;
  display: inline-block;
  line-height: 1em;
  margin: 0;
} 

 <div id="outer">
  <div id="inner">
    <h1 id="header">
      Some Text
    </h1>
  </div>
</div> 

在上面的jsfiddle中，我希望#header位于#outer和#inner的顶部和底部之间的中间位置.显然不是这样.

解决方案

简单地说:vertical-align仅在应用于该元素的元素具有display: inline-block或ìnline时有效/有效，例如，当您想将一堆图像的顶部边框对齐:将它们定义为inline-blocks并对其应用vertical-align: top

这里是一个例子:

 .wrapper {
  height: 250px;
  border: 1px solid green;
}

.wrapper>img {
  display: inline-block;
  vertical-align: top;
} 

 <div class="wrapper">
  <img src="https://placehold.it/120x40">
  <img src="https://placehold.it/70x140">
  <img src="https://placehold.it/80x60">
  <img src="https://placehold.it/60x140">
</div> 

在您的小提琴中，这些元素彼此嵌套，而不是彼此相邻，即它们不是同级兄弟-每个元素只有一个子元素，因此没有同上示例中的同级兄弟对齐. >

I do not understand when vertical-align will and won't work.

Every time I run into a use case for vertical-align it seems to be a coin toss as to whether it will actually work. I know it has to be applied to inline elements. I have read that I must specify a line-height for elements that do not normally have one. I have read that the height property must have a static (non-auto/non-%) value. I have read that some (modern) browsers do not handle vertical-align correctly if the element they are used on is not naturally an inline element. I am unclear on whether vertical-align should be on the containing element (like text-align) or the element I want vertically aligned.

I've created this jsfiddle to try to work out the problem, but remain confused.

#outer {
  box-sizing: border-box;
  border: red 1px solid;
  height: 200px;
  width: 400px;
  text-align: center;
}

#inner {
  border: blue 1px solid;
  display: inline-block;
  height: 200px;
  vertical-align: middle;
}
    
#header {
  border: green 1px solid;
  display: inline-block;
  line-height: 1em;
  margin: 0;
}

<div id="outer">
  <div id="inner">
    <h1 id="header">
      Some Text
    </h1>
  </div>
</div>

In the jsfiddle above I would expect #header to be centered halfway between the top and bottom of #outer and #inner. Obviously, that's not the case.

解决方案

Simply said: vertical-align is only active/valid when the element it is applied to has display: inline-block or ìnline, which for example is useful if you want to align a bunch of images at their top border: You define them as inline-blocks and apply vertical-align: top to them

Here is an example:

.wrapper {
  height: 250px;
  border: 1px solid green;
}

.wrapper>img {
  display: inline-block;
  vertical-align: top;
}

<div class="wrapper">
  <img src="https://placehold.it/120x40">
  <img src="https://placehold.it/70x140">
  <img src="https://placehold.it/80x60">
  <img src="https://placehold.it/60x140">
</div>

In your fiddle, the elements are nested into each other, not next to each other, i.e. they are not siblings - there is only one child element each, so there is no alignment of siblings like in the example above.

这篇关于我不会“得到" vertical-align css属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！