tutorial básico do CSS

modelo de caixa do CSS

CSS3Tutorial Básico

Manual de referência do CSS

CSS @regras (RULES)

Branco do CSS-space(Espaço)Linha do CSS-height(Altura da Linha)

vertical CSS-alinhamento (vertical)

vertical CSS-A propriedade de alinhamento vertical define o modo de alinhamento vertical da caixa embutida ou da célula da tabela. vertical-align é uma das características importantes do CSS. Para iniciantes, pode ser difícil de dominar no início, mas há exemplos no final do artigo para facilitar a compreensão e domínio dessa propriedade.

O que ele pode fazer

Ele se aplica a elementos inline ou bloco inline.
Ele afeta o alinhamento do elemento, sem afetar seu conteúdo. (Exceto para células de tabela)
Quando aplicado a células de tabela, ele afeta o conteúdo da célula, não a célula em si.

vertical CSS-alinhamento vertical

valor	descrição
baseline	Alinha a linha base do elemento com a linha base do elemento pai. Este é o valor padrão.
length	Usado para aumentar ou diminuir o comprimento do elemento pela medida especificada. Também pode usar valores negativos.
%	Usado para aumentar ou diminuir o elemento em porcentagem da propriedade height. Permite valores negativos.
sub	Alinha o elemento, como se fosse um subíndice.
super	Alinha o elemento, como se fosse um superíndice.
top	A parte superior do elemento está alinhada com a parte superior do elemento mais alto da linha.
bottom	O fundo do elemento está alinhado com o elemento mais baixo da linha.
text-top	A parte superior do elemento está alinhada com a parte superior da fonte do elemento pai.
middle	O elemento é colocado no meio do elemento pai.
text-bottom	O fundo do elemento está alinhado com o fundo da fonte do elemento pai.
initial	Define essa propriedade para seu valor padrão.
inherit	Herda essa propriedade do elemento pai.

Exemplo Online de Alinhamento Vertical do CSS

Exemplo

<!DOCTYPE　html>　　
<html>　　
<head>　　
<style>　　
img.top　{　　
　　　　vertical-align:　text-top;　　
}　　
img.bottom　{　　
　　　　vertical-align:　text-bottom;　　
}　　
</style>　　
</head>　　
<body>　　
<p><img　src="/run/images/heart.jpg"　alt="padrão de coração"/>　Esta é uma imagem com alinhamento padrão.</p>　　　
<p><img　src="/run/images/heart.jpg"　style="vertical-align:　text-top;"　alt="padrão de coração"/>　Esta é uma imagem com alinhamento superior do texto.</p>　　　
<p><img　src="/run/images/heart.jpg"　style="vertical-align:　text-bottom;"　alt="padrão de coração"/>　Esta é uma imagem com alinhamento inferior do texto.</p>　　
</body>　　
</html>

Teste e veja‹/›

Saída:

Esta é uma imagem com alinhamento padrão.

Esta é uma imagem com alinhamento superior do texto.

Esta é uma imagem com alinhamento inferior do texto.

Branco do CSS-space(Espaço)Linha do CSS-height(Altura da Linha)