From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/vertical-align/index.html | 300 ++++++++++++++++++++++++++ 1 file changed, 300 insertions(+) create mode 100644 files/pt-br/web/css/vertical-align/index.html (limited to 'files/pt-br/web/css/vertical-align/index.html') diff --git a/files/pt-br/web/css/vertical-align/index.html b/files/pt-br/web/css/vertical-align/index.html new file mode 100644 index 0000000000..f6e7c70e29 --- /dev/null +++ b/files/pt-br/web/css/vertical-align/index.html @@ -0,0 +1,300 @@ +--- +title: vertical-align +slug: Web/CSS/vertical-align +tags: + - CSS + - Propriedades CSS + - Referencia +translation_of: Web/CSS/vertical-align +--- +
{{CSSRef}}
+ +

A propriedade  vertical-align do CSS especifica o alinhamento vertical de um inline ou caixa table-cell.

+ +
/* 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;
+
+ +

A propriedade vertical-align pode ser usada em dois contextos:

+ + + +
+ + + +
+ +

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

+ + + +
+ + + +
+ +

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

+ +

Observe que  vertical-align é aplicado apenas em elementos inline e table-cell: Você não pode usar isso para alinhar verticalmente elementos de nível de bloco.

+ +

{{cssinfo}}

+ +

Sintaxe

+ +

This property is specified as one of the keyword values listed below.

+ +

Valores para elementos inline

+ +

Most of the values vertically align the element relative to its parent element:
+ Essas propriedades alinham verticalmente o elemento relativamente a seu elemento pai

+ +
+
baseline
+
Aligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like {{HTMLElement("textarea")}}, is not specified by the HTML specification, meaning that their behavior with this keyword may change from one browser to the other.
+
sub
+
Aligns the baseline of the element with the subscript-baseline of its parent.
+
super
+
Aligns the baseline of the element with the superscript-baseline of its parent.
+
text-top
+
Aligns the top of the element with the top of the parent element's font.
+
text-bottom
+
Aligns the bottom of the element with the bottom of the parent element's font.
+
middle
+
Aligns the middle of the element with the baseline plus half the x-height of the parent.
+
{{cssxref("<length>")}}
+
Aligns the baseline of the element at the given length above the baseline of its parent.
+
{{cssxref("<percentage>")}}
+
Like <length> values, with the percentage being a percent of the {{Cssxref("line-height")}} property.
+
+ +

(Negative values are allowed for <length> and <percentage>.)

+ +

The following two values vertically align the element relative to the entire line rather than relative to its parent:

+ +
+
top
+
Align the top of the element and its descendants with the top of the entire line.
+
bottom
+
Align the bottom of the element and its descendants with the bottom of the entire line.
+
+ +

For elements that do not have a baseline, the bottom margin edge is used instead.

+ +

Values (for table cells)

+ +
+
baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>)
+
Align the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.
+
top
+
Align the top padding edge of the cell with the top of the row.
+
middle
+
Center the padding box of the cell within the row.
+
bottom
+
Align the bottom padding edge of the cell with the bottom of the row.
+
+ +

Negative values are allowed.

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Exemplo

+ +

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; }
+
+ +

Output

+ +

{{EmbedLiveSample("Example")}}
+  

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'vertical-align')}}{{Spec2('CSS3 Transitions')}}Defines vertical-align as animatable.
{{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}{{Spec2('CSS2.1')}}Add the {{cssxref("<length>")}} value and allows it to be applied to element with a {{cssxref("display")}} type of table-cell.
{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}{{Spec2('CSS1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}4.04.01.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.01.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0
+
+ +

Veja também

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