Não estou conseguindo alinhar o texto no botão

[the chuck norris 0]

Não consigo alinhar um texto em um botão. Vejam o código:

 

 

css:

 

.btvejamais  {
position:absolute;
top: 1375px;
left: 955px;
margin:0px;
padding:0px;

}


.btvejamais a {  
font: bold 15px/24px helvetica;	
padding:0px;
text-decoration: none; 
text-align: center;
color:#fff;
background: url('imoveis/img/bt_veja_mais.png')
no-repeat center center;	
width: 147px;  
height: 51px;	
display:block;	
}

 

html:

<p class="btvejamais"> 
<a href="#" title="Veja mais"> Veja mais   </a> 

</p>

 

O resultado fica assim: Clique aqui

 

Alguém pode me ajudar? Gostaria que ele ficasse todo centralizado, tento dar um <br> mais avança demais.

[Thiago Souza_63114 1]

Coloca um padding no texto :)

[Diéssica 140]

Se pôr padding-top, tu vai ter que diminuir a altura do botão pra não ficar uma margem embaixo.

 

Tenta com line-height.

 

line-height:1;

 

Vai alterando o valor até ficar no meio.

 

:seta: http://www.w3schools.com/cssref/pr_dim_line-height.asp

 

:bye:

[Thiago Moraes 32]

A tag <p> é para paragrafo, quebra de linha, você pode até conseguir adaptar para um botão mas não é a forma correta.

 

Use <span> ou <div>, e defina a margem necessária com css.

[Evandro Oliveira 331]

Se você tiver CERTEZA que nenhum botão vai ter mais de uma linha, a Diéssica já matou a charada. Defina o line-height do link com o mesmo valor da altura do parágrafo:

 

<p class="vejamais"><a href="">texto</a></p>

 

.vejamais { border: 1px solid black; height: 50px; }
.vejamais a { line-height: 50px; }

 

Se você não tiver certeza, pode utilizar o display com o valor table-cell

 

.vejamais a { display: table-cell; vertical-align: middle; }

 

Se você tiver que dar suporte a IE7- tem que aplicar um adicional

 

<p class="vejamais">
<!-- [if lte IE 7]><span class="verticalizador"></span><![endif]-->
<a href="">texto</a>
</p>

 

.verticalizador { display: inline-block; height: 100%; vertical-align: middle; }

 

Note que as três técnicas fornecidas dependem da altura do elemento contêiner ser conhecido.

[Thiago Moraes 32]

Complementando o meu post...

 

Use <span> ou <div>, e defina a margem (padding) necessária com css.

[Diéssica 140]

A tag <p> é para paragrafo, quebra de linha, você pode até conseguir adaptar para um botão mas não é a forma correta.

 

Use <span> ou <div>, e defina a margem (padding) necessária com css.

Mais correto do que utilizar <p> para quebra de linha não existe mesmo, né?

 

Line-height são margens de linha. Ele quer dar margem ao texto, ele dá margem na linha. O único motivo que possa fazer ele utilizar span (ou algo mais desnecessário ainda como uma DIV) é possuir duas ou mais linhas no botão, como o Evandro falou.

 

E sobre o "mas não é a forma correta"...

<p class="btvejamais"> 
<a href="#" title="Veja mais"> Veja mais   </a> 
</p>

Um "Veja mais" formatado, só :)

 

Vou até começar a utilizar paragráfos para quebrar linhas de texto no meu caderno....

[Thiago Moraes 32]

Diéssica, dei minha sugestão, você a sua, as duas podem ser aplicadas.

 

Mas tão desnecessário quanto o seu sarcasmo é usar um parágrafo pra formatar um botão. :)

[Diéssica 140]

Diéssica, dei minha sugestão, você a sua, as duas podem ser aplicadas.

Claro, assim como formatar um parágrafo (que tu considera ERRADO) é uma coisa que também pode ser aplicada.

 

Mas tão desnecessário quanto o seu sarcasmo é usar um paragráfo pra formatar um botão. :)

Fala pro autor do tópico! Ou eu que tô formatando?

 

É o que eu disse:

Um "Veja mais" formatado, só :)

Juro que o sarcasmo não foi por mal!

 

:bye:

[Evandro Oliveira 331]

Diéssica, dei minha sugestão, você a sua, as duas podem ser aplicadas.

 

Mas tão desnecessário quanto o seu sarcasmo é usar um parágrafo pra formatar um botão. :)

 

Temos que levar em conta a interface visual e a marcação.

 

Levando em conta que seja um botão, deixamos usuários sem suporte a JavaScript de fora, porque o botão fica estático? Não pode ser um link com formato, com aparência visual de botão??

 

Uma coisa que eu discordo na implementação é que o elemento - pra não chamar de botão - tem sua área clicável limitada ao texto, que daria uma sensação ruim, sendo que a intuição diria que a área clicável é todo o conteúdo em vermelho.

 

Trocaria a implementação para algo similar a isso aqui:

 

<a class="vermais" href="">ver mais</a>

 

.vermais { background: red; color: white; display: inline-block; height: 40px; line-height: 40px; }

 

Essa implementação, inclusive, é alheia à discussão se isso é ou não um botão e qual TAG deveria ser utilizada.

[Diéssica 140]

<a class="vermais" href="">ver mais</a>

.vermais { background: red; color: white; display: inline-block; height: 40px; line-height: 40px; }

Não é melhor um

a.vermais { background: red; color: white; display: inline-block; height: 40px; line-height: 40px; }

?

 

E o line-height em números? 1, 2, 3...

 

Uma pena a formatação do a ser muito limitada :(

[Evandro Oliveira 331]

Não é melhor um

a.vermais { background: red; color: white; display: inline-block; height: 40px; line-height: 40px; }

?

 

E o line-height em números? 1, 2, 3...

 

Uma pena a formatação do a ser muito limitada :(

 

Desde que se reserve a classe vermais apenas para este tipo de botão, não.

 

Veja, primeiro você seleciona todos os elementos cuja classe seja igual a vermais. Desta seleção, você filtra apenas os que sejam elementos A, ou seja, todos. Processamento desnecessário. ;)

 

line-height pode assumir o valor explícito "normal", um número absoluto que será multiplicado pelo font-size do elemento, uma medida qualquer (em, ex, px, cm, etc), uma percentagem ou o valor "inherit". http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height

 

E os únicos elementos que vejo limitação são DL->DT|DD. O resto é possível fazer de tudo com qualquer elemento.