Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.

Tutoriais CSS - 4
Como Alinhar um Texto Verticalmente

A propriedade vertical-align em CSS é usada para definir o alinhamento vertical de uma caixa inline ou table-cell. É uma das propriedades autoexplicativas do CSS.
A propriedade vertical-align controla como os elementos são definidos próximos uns dos outros. Quando esta propriedade se aplica às células da tabela, em vez de afetar a própria célula, ela afeta o conteúdo da célula.
Esta propriedade tem vários valores válidos: baseline, top, bottom, middle, text-top, text-bottom, sub, super e lenght (em px, cm, em, etc.). Os valores sub e super desta propriedade são geralmente usados para o subscrito e sobrescrito do texto.
Esta propriedade pode ser usada para alinhar o conteúdo de uma célula em uma tabela verticalmente. Ele pode alinhar verticalmente uma imagem em uma linha de texto. Esta propriedade não pode ser usada para alinhar os elementos de nível de bloco verticalmente.
Vamos entender essa propriedade usando algumas ilustrações:
Exemplo:
<!DOCTYPE html> <html> <head> <style> table, th, td{ border: 2px solid red; border-collapse: collapse; font-size: 20px; } #super{ vertical-align: super; } #sub{ vertical-align: sub; } </style> <script src='/google_analytics_auto.js'></script></head> <body> <table> <td style="vertical-align: baseline;">baseline</td> <td style="vertical-align: middle;">middle</td> <td style="vertical-align: bottom;">bottom</td> <td style="vertical-align: top;">top</td> <td style="vertical-align: text-top;"> </td> </table> <h2>Uso dos valores super e sub</h2> <h3>Usando o valor super: x<span id="super">2</span>+ y<span id="super">2</span> = r<span id="super">2</span></h3> <h3>Fórmula química da água usando o valor sub: H<span id="sub">2</span>O</h3> </body> </html>
Resultado:

*****
Agora, há outro exemplo em que estamos alinhando o texto com a imagem.
Exemplo:
<!DOCTYPE html> <html> <head> <style> div{ font-size: 20px; border: 2px solid red; } img{ width:150px; height: 100px; } img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } </style> <script src='/google_analytics_auto.js'></script></head> <body> <div>Uma <img src="laranja.png" /> imagem com o alinhamento padrão.</div> <div>Uma <img class="bottom" src="maca.png" /> imagem com o alinhamento na base.</div> <div>Uma <img class="middle" src="pera.png" /> imagem com o alinhamento no centro.</div> <div>Uma <img class="top" src="uva1.png" /> imagem com o alinhamento no topo.</div> </body> </html>
Resultado:

*****

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino