Ir para conteúdo

POWERED BY:

Arquivado

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

Zephyrus

[Resolvido] Centralizar itens de lista em duas linhas

Por , em Desenvolvimento frontend

Recommended Posts

Zephyrus    0

Zephyrus
Postado

Tenho uma lista com cinco itens que precisam estar centralizados na página e se disporem desta maneira:

 

Imagem Postada

 

Tive que criar duas linhas pois os itens não cabiam em uma só. O que eu tinha pensado era dispor a lista inline e dar page break depois do terceiro item, mas isso não é permitido. Coloquei então cada item com float: left e clear:both como classe do quarto item. A lista está disposta em duas linhas, mas não está centralizada. Alguém sabe como posso resolver a partir disso ou tem uma outra solução?

 

Obrigado desde já!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Não testei, mas provavelmente irá dá certo.

 

<html>
<head>
<title>Teste</title>
<style>
.lineOne span{
margin: 0 54px 0 47px;
}
.lineTwo span{
margin: 0 0 0 103px;
}
</style>
</head>
<body>
<p class="lineOne"><span>Texto</span><span>Texto</span><span>Texto</span></p>
<p class="lineTwo"><span>Texto</span><span>Texto</span></p>
</body>
</html>

Não vi nenhuma lista, por isso não usei. É só trabalhar com class. :D

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Zephyrus    0

Zephyrus
Postado

Obrigado pela resposta, Thiago. Até poderei usar esse código como alternativa, mas preferencialmente preciso que seja uma lista. Tentei resolver de outra forma, se puder dar uma olhada e ajudar novamente agradeço!

 

<html>
<head>
<title>Teste</title>
<style type="text/css">
#central {
	width: 640px;
	text-align: center;
}
#central li {
	list-style: none;
	display: inline;
	padding-right: 30px;
	padding-left: 30px;
}
</style>
</head>
<body>
<div id="central">
  <ul>  
    <li>Texto</li>
    <li>Texto</li>
    <li>Texto<br /></li>
    <li>Texto</li>
    <li>Texto</li>
</ul>
</div>
</body>
</html>

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Seria algo assim:

 

<html>
<head>
<title>Teste</title>
<style>
ul{
list-style: none;
clear: both;
}
.lineOne li{
margin: 0 54px 0 47px;
float: left;
}
.lineTwo li{
margin: 0 0 0 103px;
float: left;
}
</style>
</head>
<body>
<ul class="lineOne">  
	<li>Texto</li>
	<li>Texto</li>
	<li>Texto</li>
</ul>
<ul class="lineTwo">
    <li>Texto</li>
    <li>Texto</li>
</ul>
</body>
</html>
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

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