Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Mr Crowley

[Resolvido] Alinhas links no centro d dentro de um div

Por , em Desenvolvimento frontend

Recommended Posts

Mr Crowley    0

Mr Crowley
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mr Crowley    0

Mr Crowley
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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" 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;
}
ul.conteudo_imagem li {
	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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mr Crowley    0

Mr Crowley
Postado

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" 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;
}
ul.conteudo_imagem li {
	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+

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mr Crowley    0

Mr Crowley
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito