Alinhar na vertical o texto

[Filipe_Moraes 15]

ola pessoal, tenho este codigo para fazer um botão mudar de cor, acontece que no alinhamento, ele fica centrado mas nao consigo colocalo no meio do quadrado na vertical, ou seja, o texto esta no topo, como resolvo isso, seria colocar um "middle", agradecia a ajuda!!

<style>.buscar {	background-color:#000000;	height:32px;	width:127px;	vertical-align:middle;}.buscar a{	font: bold 12px arial, helvetica, sans-aerif;		padding:0px;	text-decoration: none;	color:#ccc;	width:127px;  	height:32px;		display:block;	text-align:center;	vertical-align:middle;}.buscar a:hover{	background-color:#00CC00;}</style>

[Poe 0]

Oi Filipe_Moraes!

 

1) Não use os estilos na sua página, sempre faça um link para um css externo (economiza no download e também permite que você use essa folha de estilos para outras páginas se necessário);

 

2) Está faltando algo no seu código para que o vertical-align funcione. Adiciona um display:table-cell.

 

.buscar {	height:32px;	width:127px;	color: #FFFFFF;	background:#000000;	vertical-align:middle;	display: table-cell;}

O problema é que o table-cell não funciona nos IEs antigos (5, 5.5 e 6), o que você pode fazer é alinhar "na unha", ou seja, dar uns pixels de padding.

 

Essa gambiarra ficaria assim:

 

.buscar {	height:32px;	width:127px;	color: #FFFFFF;	background:#000000;}.buscar a {	font: bold 12px arial, helvetica, sans-aerif;		padding: 7px 0 0 0;	text-decoration: none;	color:#ccc;	width:127px;  	height:25px;		display:block;	text-align:center;}

É isso aí.

 

E dá uma estudada em como optimizar o seu CSS.

 

1) Quando você for escrever valores com zero, não precisa definir se é px, em, etc;

2) Quando for usar background-color, você pode usar somente background e inserir a cor na sequência.

 

Acho que é isso! :)

 

Abraço.