From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/vertical-align/index.html | 255 ++++++++++++++++++++++++++ 1 file changed, 255 insertions(+) create mode 100644 files/zh-cn/web/css/vertical-align/index.html (limited to 'files/zh-cn/web/css/vertical-align/index.html') diff --git a/files/zh-cn/web/css/vertical-align/index.html b/files/zh-cn/web/css/vertical-align/index.html new file mode 100644 index 0000000000..e07185a92e --- /dev/null +++ b/files/zh-cn/web/css/vertical-align/index.html @@ -0,0 +1,255 @@ +--- +title: vertical-align +slug: Web/CSS/vertical-align +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/vertical-align +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/vertical-align.html")}}
+ + + +

vertical-align属性可被用于两种环境：

+ + + +
+ + + +
+ +

{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}

+ + + +
+ + + +
+ +

{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}

+ +

注意 vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素。

+ +

语法

+ +
/* Keyword values */
+vertical-align: baseline;
+vertical-align: sub;
+vertical-align: super;
+vertical-align: text-top;
+vertical-align: text-bottom;
+vertical-align: middle;
+vertical-align: top;
+vertical-align: bottom;
+
+/* <length> values */
+vertical-align: 10em;
+vertical-align: 4px;
+
+/* <percentage> values */
+vertical-align: 20%;
+
+/* Global values */
+vertical-align: inherit;
+vertical-align: initial;
+vertical-align: unset;
+
+ +

vertical-align 属性指定为下面列出的值之一。

+ +

行内元素的值

+ +

相对父元素的值

+ +

这些值使元素相对其父元素垂直对齐：

+ +
+
baseline
+
使元素的基线与父元素的基线对齐。HTML规范没有详细说明部分可替换元素的基线，如{{HTMLElement("textarea")}} ，这意味着这些元素使用此值的表现因浏览器而异。
+
sub
+
使元素的基线与父元素的下标基线对齐。
+
super
+
使元素的基线与父元素的上标基线对齐。
+
text-top
+
使元素的顶部与父元素的字体顶部对齐。
+
text-bottom
+
使元素的底部与父元素的字体底部对齐。
+
middle
+
使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐。
+
{{cssxref("<length>")}}
+
使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。
+
{{cssxref("<percentage>")}}
+
使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是{{Cssxref("line-height")}}属性的百分比。可以是负数。
+
+ +

相对行的值

+ +

下列值使元素相对整行垂直对齐：

+ +
+
top
+
使元素及其后代元素的顶部与整行的顶部对齐。
+
bottom
+
使元素及其后代元素的底部与整行的底部对齐。
+
+ +

没有基线的元素，使用外边距的下边缘替代。

+ +

表格单元格的值

+ +
+
baseline (以及 sub, super, text-top, text-bottom, <length>, <percentage>)
+
使单元格的基线，与该行中所有以基线对齐的其它单元格的基线对齐。
+
top
+
使单元格内边距的上边缘与该行顶部对齐。
+
middle
+
使单元格内边距盒模型在该行内居中对齐。
+
bottom
+
使单元格内边距的下边缘与该行底部对齐。
+
+ +

可以是负数。

+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<div>An <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a default alignment.</div>
+<div>An <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div>
+<div>An <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-bottom alignment.</div>
+<div>An <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div>
+
+ +

CSS

+ +
img.top { vertical-align: text-top; }
+img.bottom { vertical-align: text-bottom; }
+img.middle { vertical-align: middle; }
+
+ +

结果

+ +

{{EmbedLiveSample("示例")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态描述
{{SpecName('CSS3 Transitions', '#animatable-css', 'vertical-align')}}{{Spec2('CSS3 Transitions')}}定义 vertical-align 为可动画的。
{{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}{{Spec2('CSS2.1')}}增加 {{cssxref("<length>")}} 取值， 允许它对{{cssxref("display")}}类型为table-cell的元素生效。
{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}{{Spec2('CSS1')}}初步定义。
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.vertical-align")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf