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