css vertical-align全解

时间：2021-06-18 20:26:48

CSS 的属性 vertical-align 指定了内联（inline）元素或表格单元格（table-cell）元素的垂直对齐方式。

 要记住：vertical-align不影响块级元素中内容的对齐。

(

vertical-align要点

  1. It only applies to inline or inline-block elements 或table-cell元素
  2. It affects the alignment of the element itself, not its contents (except when applied to table cells)
  3. When it’s applied to a table cell, the alignment affects the cell contents, not the cell itsel

从第二点可以看出，但是inline or inline-block<它影响的是元素自己的对齐，而不是他的内容。

从第3点，应用到table-cell,影响的是cell内容，而不是元素自己.

In other words, the following code would have no effect:

  1. div {
  2. vertical-align: middle; /* this won't do anything */
  3. }

Why? Because a <div> is a block-level element, not inline. Of course, if you converted the<div> to an inline or inline-block element, then the vertical-align property would have an effect.

On the other hand, when used correctly (on an inline or inline-block element), thevertical-align property will cause the targeted element to align itself in relation to other inline elements.

How high up or down an element is aligned would depend on the size of the inline elements on the same line, or on the line-height set for that line.转自：http://www.impressivewebs.com/css-vertical-align/

)

  • 默认值baseline
  • Applies toinline-level and table-cell elements
  • 可继承no 不能继承
  • Percentagesrefer to the line-height of the element itself
  • Mediavisual
  • 计算值for percentage and length values, the absolute length, otherwise the keyword as specified
  • Animatableyes, as a length
  • Canonical orderthe unique non-ambiguous order defined by the formal grammar

语法

Formal syntax: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>

值 (对于内联元素)

多数值是相对于父元素：

baseline
元素基线与父元素的基线对齐。一些 可替换元素，比如 <textarea> ， HTML标准没有说明它的基线，这意味着使用这个关键字，各浏览器表现可能不一样。
（如果一个垂直对齐元素没有基线--也就是说，如果这是一个图像或表单插入元素，或其他替换元素，那么该元素的底端与其父元素对齐。
p{

    border:1px solid red;

}

img{

    vertical-align:baseline;

}

<p>如果<img src="data:images/mm.jpg" style="width:100px;height=100px;"/>一个<span>垂直</span>对齐元素没有基线-也就是说，如果这是一个图像或表单元素，或是其他其他替换元素，那么该元素的底端与其

父元素的基线对齐

</p>

css vertical-align全解

sub
元素基线与父元素的下标基线对齐。
super
元素基线与父元素的上标基线对齐。
text-top
元素顶端与父元素字体的顶端对齐。
text-bottom
元素底端与父元素字体的底端对齐。
middle
元素中线与父元素的小写字母的中线对齐。
（居中对齐，它往往（但不总是）应用于图像，你可能会把它的名字想象其效果，但你的想象与其实际效果并不完全一样。
middle会把行内元素框的中点与父元素的基线上方0.5ex的一个点对齐，这里的1ex相对于父元素的font-size定义。
<length>
元素基线超过父元素的基线指定高度。可以取负值。
<percentage>
同 <length> , 百分比相对于 line-height 。

下面两个属性不像上面的属性相对于父元素，而是相对于整行：

 

bottom
元素及其后代的底端与整行的底端对齐。
(将元素行内框的底端与行框的底端对齐，下面的代码：
p{

    border:1px solid red;

}

img{

    vertical-align:bottom;

}

span{

    vertical-align:super;

}

</style>

</head>

<body>

</body>

<p>如果<img src="data:images/mm.jpg" style="width:100px;height=100px;"/>一个<span>垂直</span>对齐元素没有基线-也就是说，如果这是一个图像或表单元素，或是其他其他替换元素，那么该元素的底端与其

父元素的基线对齐

</p>

加 bottom                                                               不加bottom

css vertical-align全解  css vertical-align全解

可以看到加bottom的p的border与图片没有空隙。

top 元素及其后代的顶端与整行的顶端对齐。top显示如下:

css vertical-align全解

还有一个规则，如果元素没有基线baseline，则以它的外边距的下边缘为基线。哪些元素没有baseline？就是替换元素没有

baseline。为了验证这个。我们设置：

img{
vertical-align:bottom;
margin-bottom:100px;
}

css vertical-align全解

确实设置外边距影响了基线。

值 (对于表格单元格)

baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>)
与同行单元格的基线对齐。
top
单元格的内边距的上边缘与行的顶端对齐。
middle
单元格垂直居中。
bottom
单元格的内边距的下边缘与行的底端对齐。

可以取负值。

 以上内容大部分来自：https://developer.mozilla.org/zh-CN/docs/CSS/vertical-align。

更多看一篇非常好的文章：
http://phrogz.net/css/vertical-align/index.html
现摘取部分内容：
#div1{

    width:300px;

    height:300px;

    border:1px solid red;

}

img{

    vertical-align:middle;

    width:100px;

    height:100px;

}

</style>

</head>

<body>

<div id="div1">

    如果<img src="data:images/mm.jpg" />一个>垂直span>对齐元素没有基线-也就是说，如果这是一个图像或表单元素，或是其他其他替换元素，那么该元

 </div>

显示如下：

css vertical-align全解

为什么会这样？middle会把行内元素的中点与父元素基线对齐。对于图片来说，元素中点就是图片中点，与父元素基线对齐，即父元素基线和图片中点一样，所以出现了上面的情况。

怎么让内容垂直居中？

#div1加上

display:table-cell;
vertical-align:middle;

就可以了。

css vertical-align全解

下面的代码怎么显示；（只在img

增加了一句：

vertical-align:top;）
#div1{

    width:300px;

    height:300px;

    border:1px solid red;

     display:table-cell;

    vertical-align:middle;

}

img{

    vertical-align:top;

    width:100px;

    height:100px;

}

</style>

</head>

<body>

<!--

<p>如果<img src="data:images/mm.jpg" style="width:100px;height=100px;"/>一个<span>垂直</span>对齐元素没有基线-也就是说，如果这是一个图像或表单元素，或是其他其他替换元素，那么该元素的底端与其

父元素的基线对齐

</p> -->

<div id="div1">

    如果<img src="data:images/mm.jpg" />一个>垂直对齐元素没有基线-也就是说，如果这是一个图像或表单元素，或是其他其他替换元素，那么该元

 </div>

</body>

css vertical-align全解

可以看到，加上后图片没有影响，只是与图片同行的文字上移动了。为什么？

在img加上vertical-align:top;表示元素及其后代的顶端与整行的顶端对齐。文字与行框顶端对齐了。

（上面的文字和图片外部不能加《p》或其他快标签，否则就不居中了）

vertical-align in table cells

When used in table cells, vertical-align does what most people expect it to, which is mimic the (old, deprecated) valign attribute. In a modern, standards-compliant browser, the following three code snippets do the same thing:

<td valign="middle"> <!-- but you shouldn't ever use valign --> </td>

<td style="vertical-align:middle"> ... </td>

<div style="display:table-cell; vertical-align:middle"> ... </div>

Shown in your browser, the above (with appropriate wrappers) display as:

<td> using valign="middle" <td> using valign="bottom"
<td> using vertical-align:middle <td> using vertical-align:bottom
<div> using display:table-cell; vertical-align:middle
<div> using display:table-cell; vertical-align:bottom

vertical-align on inline elements

When vertical-align is applied to inline elements, however, it's a whole new ballgame. In this situation, it behaves like the (old, deprecated) alignattribute did on <img> elements. In a modern, standards-compliant browser, the following three code snippets do the same thing:

<img align="middle" ...>

<img style="vertical-align:middle" ...>

<span style="display:inline-block; vertical-align:middle"> foo<br>bar </span>

vertical-align on other elements

Technically, this CSS attribute doesn't go on any other kinds of elements. When the novice developer applies vertical-align to normal block elements (like a standard <div>) most browsers set the value to inherit to all inline children of that element.

严格来说vertical-align属性只对inline和table-cell有作用，当新手应用它到块元素时，大多数浏览器设置子内联元素继承它。

这里错误vertical-align是不能继承的。

So how do I vertically-center something?!

If you are reading this page, you're probably not as interested in why what you were doing is wrong. You probably want to know how to do it properly.

Method 1

The following example makes two (non-trivial) assumptions. If you can meet these assumptions, then this method is for you:

  • You can put the content that you want to center inside a block and specify a fixed height for that inner content block.
  • It's alright to absolutely-position this content. (Usually fine, since the parent element inside which the content is centered can still be in flow.

If you can accept the above necessities, the solution is:

  1. Specify the parent container as position:relative or position:absolute.
  2. Specify a fixed height on the child container.
  3. Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.
  4. Set margin-top:-yy where yy is half the height of the child container to offset the item up.

An example of this in code:

<style type="text/css">

	#myoutercontainer { position:relative }

	#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }

</style>

...

<div id="myoutercontainer">

	<div id="myinnercontainer">

		<p>Hey look! I'm vertically centered!</p>

		<p>How sweet is this?!</p>

	</div>

</div>

这个方法很常见，设置top:50%,关键是margin-top为height的一半。

Method 2

This method requires that you be able to satisfy the following conditions:

  • You have only a single line of text that you want to center.
  • You can specify a fixed-height for the parent element.

If you can accept the above necessities, the solution is:

  1. Set the line-height of the parent element to the fixed height you want.

An example of this in code:

<style type="text/css">

	#myoutercontainer2 { height:4em; line-height:4em }

</style>

...

<p id="myoutercontainer2">

	Hey, this is vertically centered. Yay!

</p>

In your browser, the above example renders as:

Hey, this is vertically centered. Yay!

就把line-height设置成与height相同。

更多：http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

相关文章