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/text-align/index.html | 492 ++++++++++++++++++++++++++++++ 1 file changed, 492 insertions(+) create mode 100644 files/zh-cn/web/css/text-align/index.html (limited to 'files/zh-cn/web/css/text-align') diff --git a/files/zh-cn/web/css/text-align/index.html b/files/zh-cn/web/css/text-align/index.html new file mode 100644 index 0000000000..4ddd3c5614 --- /dev/null +++ b/files/zh-cn/web/css/text-align/index.html @@ -0,0 +1,492 @@ +--- +title: text-align +slug: Web/CSS/text-align +tags: + - CSS文字 + - 参考 + - 属性 + - 布局 +translation_of: Web/CSS/text-align +--- +
{{CSSRef}}
+ +

text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

+ +
/* Keyword values */
+text-align: left;
+text-align: right;
+text-align: center;
+text-align: justify;
+text-align: justify-all;
+text-align: start;
+text-align: end;
+text-align: match-parent;
+
+/* Block alignment values (Non-standard syntax) */
+text-align: -moz-center;
+text-align: -webkit-center;
+
+/* Global values */
+text-align: inherit;
+text-align: initial;
+text-align: unset;
+ +

+ + + +

{{EmbedLiveSample("text-align", "100%", 350, "", "", "example-outcome-frame")}}

+ +

{{cssinfo}}

+ +

语法

+ +

text-align属性指定为从以下值列表中选择的单个关键字。

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +

Values

+ +
+
start {{experimental_inline}}
+
如果内容方向是左至右，则等于left，反之则为right。
+
end {{experimental_inline}}
+
如果内容方向是左至右，则等于right，反之则为left。
+
left
+
行内内容向左侧边对齐。
+
right
+
行内内容向右侧边对齐。
+
center
+
行内内容居中。
+
<string> {{experimental_inline}}
+
第一个出现的该（单字符）字符串被用来对齐。跟随的关键字定义对齐的方向。例如，可用于让数字值根据小数点对齐。
+
justify
+
文字向两侧对齐，对最后一行无效。
+
justify-all
+
和justify一致，但是强制使最后一行两端对齐。
+
match-parent {{experimental_inline}}
+
和inherit类似，区别在于start和end的值根据父元素的{{cssxref("direction")}}确定，并被替换为恰当的left或right。
+
+ +

指示语法

+ +
{{csssyntax("text-align")}}
+ +

示例

+ +

查看在线演示

+ +

Live Examples

+ +
div { text-align: center; border:solid; } + +

p { background:gold; width:22em; }

+some more inline content...
+ +
div { text-align: center; border:solid; } + +

p { background:gold; width:22em; margin: 1em auto; }

+some more inline content...
+ +
div { text-align:-moz-center; text-align:-webkit-center; border:solid; } + +

p { background:gold; width:22em; }

+some more inline content...
+ +

备注

+ +

居中一个块元素且不居中它的行内内容的标准兼容的方法是将它的左、右margin设为auto, 例如：

+ +

margin:auto; 或margin:0 auto; 或margin-left:auto; margin-right:auto;

+ +

示例

+ +

Left alignment

+ +

HTML

+ +
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>
+ +

CSS

+ +
.example {
+  text-align: left;
+  border: solid;
+}
+ +

Result

+ +

{{EmbedLiveSample("Left_alignment","100%","100%")}}

+ +

Centered text

+ +

HTML

+ +
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>
+ +

CSS

+ +
.example {
+  text-align: center;
+  border: solid;
+}
+ +

Result

+ +

{{EmbedLiveSample("Centered_text","100%","100%")}}

+ +

Justify

+ +

HTML

+ +
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>
+ +

CSS

+ +
.example {
+  text-align: justify;
+  border: solid;
+}
+ +

Result

+ +

{{EmbedLiveSample("Justify","100%","100%")}}

+ +

Notes

+ +

The standard-compatible way to center a block itself without centering its inline content is setting the left and right {{cssxref("margin")}} to auto, e.g.:

+ +
.something {
+  margin: auto;
+}
+ +
.something {
+  margin: 0 auto;
+}
+ +
.something {
+  margin-left: auto;
+  margin-right: auto;
+}
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Text', '#text-align', 'visibility')}}{{Spec2('CSS3 Text')}}添加了start和end关键字 keyword. Changed the unnamed initial value to start (which it was). Added the {{cssxref("<string>")}} value, the match-parent value and the start end double value.
{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}{{Spec2('CSS2.1')}}无改变
{{SpecName('CSS1', '#text-align', 'text-align')}}{{Spec2('CSS1')}}首次定义
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (left, right, center and justify)1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}3.03.51.0 (85)
Block alignment values {{non-standard_inline}}1.0{{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}[1]{{CompatNo}}{{CompatNo}}1.0 (85){{property_prefix("-khtml")}}
+ 1.3 (312){{property_prefix("-webkit")}} [1]
start {{experimental_inline}}1.0{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatNo}}{{CompatVersionUnknown}}3.1 (525)
end {{experimental_inline}}1.0{{CompatUnknown}}{{CompatGeckoDesktop("1.9.2")}}{{CompatNo}}{{CompatVersionUnknown}}3.1 (525)
match-parent{{experimental_inline}}16{{CompatUnknown}}{{CompatGeckoDesktop("40")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Block alignment values {{non-standard_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
start {{experimental_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
end {{experimental_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
match-parent{{experimental_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
true(non-standard syntax){{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
+ +

[1] Both WebKit and Gecko supports a prefixed version of left, center, and right, that applies not only to inline content but also to block elements. This is used to implement the legacy {{htmlattrxref("align", "td")}} attributes on some table-related element. Do not use these on production Web sites.

+ +

参见

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