Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
ola pessoal
tenho que alinhar link no centro de um div
<div class="conteudo_imagem">
<br />
<a href="mac.html" target="informacao_texto">MAC</a>
<a href="missao.html" target="informacao_texto">MISSÃO</a>
<a href="visao.html" target="informacao_texto">VISÃO</a>
<a href="valores.html" target="informacao_texto">VALORES</a>
</div>
tentei
<div class="conteudo_imagem">
<center>
<br />
<a href="mac.html" target="informacao_texto">MAC</a>
<a href="missao.html" target="informacao_texto">MISSÃO</a>
<a href="visao.html" target="informacao_texto">VISÃO</a>
<a href="valores.html" target="informacao_texto">VALORES</a>
</center>
</div>
mas nao funcionou
texto comum, paragrafo funciona, porem, links nao
como eu conserto isso?
abs
falow
tente:
text-align: center;
ou use o padding...
att, Rick
Vertical ou Horizontal?
Nesse caso, acho que o melhor seria fazer com UL LI, e usar line-height para vertical, e margin: auto, para horizontal.
vou responder os 3 em um so
Carlos Designer
Acho que ja esta text-align:center, vou confirmar, eu nao estou com o código aqui.
o <br> e pra nao ficar colado no topo.
Rick.hjpbarcelos
tentei usar o padding, porem, ele empurra todo o conteudo pra baixo, cria barra de rolagem, ate diminui o heith e width pra ver se consertava e nao consegui.
William Bruno
é na horizontal!
abs pessoal
mas tarde venho com o restante do código
abs
Veja:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml) xml:lang="pt-br" lang="pt-br">
<head>
<style type="text/css">
ul.conteudo_imagem {
margin-top: 20px; /* no lugar do teu <br />, melhor de controlar e mais correto */
list-style: none;
width: 260px; /* define uma lagura para poder colocar no centro através de margins automáticas */
margin: 0 auto;
} float: left;
margin-right: 10px; /* espaço entre links */
}
</style>
</head>
<body>
<ul class="conteudo_imagem">
<li><a href="mac.html" target="informacao_texto">MAC</a></li>
<li><a href="missao.html" target="informacao_texto">MISSÃO</a></li>
<li><a href="visao.html" target="informacao_texto">VISÃO</a></li>
<li><a href="valores.html" target="informacao_texto">VALORES</a></li>
</ul>
</body>
</html> o DOCTYPE é importante, para que os browsers(em especial o IE), renderize corretamente.>
Veja:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml) xml:lang="pt-br" lang="pt-br">
<head>
<style type="text/css">
ul.conteudo_imagem {
margin-top: 20px; /* no lugar do teu <br />, melhor de controlar e mais correto */
list-style: none;
width: 260px; /* define uma lagura para poder colocar no centro através de margins automáticas */
margin: 0 auto;
} float: left;
margin-right: 10px; /* espaço entre links */
}
</style>
</head>
<body>
<ul class="conteudo_imagem">
<li><a href="mac.html" target="informacao_texto">MAC</a></li>
<li><a href="missao.html" target="informacao_texto">MISSÃO</a></li>
<li><a href="visao.html" target="informacao_texto">VISÃO</a></li>
<li><a href="valores.html" target="informacao_texto">VALORES</a></li>
</ul>
</body>
</html> o DOCTYPE é importante, para que os browsers(em especial o IE), renderize corretamente.
valeu pela dica
vou dar uma olhada
e sobre
http://www.tableless.com.br/desenvolvedor-...e-sobre-wysiwyg
sou um desse club, uso IDE, porem, boa parte do código é na unha, principalmente HTML, JS, CSS.
otimo artigo
abs
T+
Tranquilo... a minha opinião sobre IDE para HTML e CSS, é bem crua e "purista".
Ferramentas visuais não são boas, e "autocompletadores" de código, lhe deixa preguiçoso, atrapalha o 'aprender' do código.
Força ae. Se conseguir resolver com o exemplo que postei, volta pra dar um feedback.
>
Tranquilo... a minha opinião sobre IDE para HTML e CSS, é bem crua e "purista".
Ferramentas visuais não são boas, e "autocompletadores" de código, lhe deixa preguiçoso, atrapalha o 'aprender' do código.
Força ae. Se conseguir resolver com o exemplo que postei, volta pra dar um feedback.
bom dia
nao tentei da forma como você disse
tentei o exemplo do text-align:center
porem, nao funcionou
.conteudo_imagem{
width:195px;
background-image:url(../img/conteudo_imagem.jpg);
text-align:center;
padding-left:38px;
}
.conteudo_imagem a{
text-decoration: none;
width:156px;
height:25px;
background-image:url(../img/menu_sub_botao.gif);
background-repeat:no-repeat;
text-align:center;
color:#47698c;
font-weight:bold;
font-size:10px;
float:left;
padding-top:8px;
}
porem, como eu resolvi
nem sei se é a forma certa
como usei o padding-left, o tanto que aumentei no padding-left eu diminui no width, e assim consegui manter o forma que queria, tanto no IE como FF.
agora, tenho problemas em fazer isso?
abs
e obrigado pela ajuda de todos
Sim cara... é o certo, o padding se soma ao elemento..
se você colocar 20px de padding-left, tire esses 20px do width....
Mas é meio uma "gambiarra" ne?!
Já que você alinhou "na mão", qualquer alteração de conteudo, pode desalinhar novamente...
Importante é que resolveu... existem muitas formas de se chegar à um resultado... a melhor delas, só nós podemos escolher.
coloca text-align:center na classe conteudo_imagem ai vai ficar alinhado!
e praque aquele <br> la em cima?