Ir para conteúdo

POWERED BY:

Arquivado

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

Marcelo Garbin

[Resolvido] Botões paginação

Por , em Desenvolvimento frontend

Recommended Posts

Marcelo Garbin    30

Marcelo Garbin
Postado

Buenas pessoal, tudo bem?

 

Tenho uma dúvida, como posso fazer com que o meu Width fique auto, sem usar o atributo table?

 

Pois quero centralizar essa div com a div pai, Outra coisa se eu tirar o valor do Width e deixar apenas como auto, ele fica com o tamanho em 100%.

 

Exemplo onde tem a linha verde da div encostar nos dois cantos da imagem.

 

screenhunter23aug141505.jpg

 

Meu code CSS:

 

#npaginas{
width:268px;
height:28px;
position:relative;
padding:10px 0;
margin:0 auto;
border:1px solid #093;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Boa tarde, Marcelo Garbin.

 

Segue exemplo abaixo:

 

<!DOCTYPE html>
<html>
<head>
	<title>Centralizando sem Width</title>

	<meta charset="UTF-8">

	<style>
		* { margin: 0; padding: 0; list-style: none; border: none; }
		.clear-margin { margin: 0; }

		.container { overflow: hidden; }

		.container-page {
			float: left;
			position: relative;
			left: 50%;
		}
		.container-page li {
			float: left;
			position: relative;
			right: 50%;
		}
		.container-page a {
			background-color: red;
			color: #FFF;
			padding: 15px 20px;
			display: block;
			margin-left: 5px;
		}
	</style>
</head>
<body>
	<div class="container">
		<ol class="container-page">
			<li><a href="">1</a></li>
			<li><a href="">dois</a></li>
			<li><a href="">III</a></li>
			<li><a href="">fourth</a></li>
			<li><a class="clear-margin" href="">5</a></li>
		</ol><!-- /content -->
	</div><!-- /page -->
</body>
</html>

 

Consegui realizar este "grade feito" após ler o seguinte post:

http://ogordo.com/centralizar-menu-sem-width/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcelo Garbin    30

Marcelo Garbin
Postado

RESOLVIDO!

 

Fiz um container pra div #npaginas, então ficou desse jeito(do jeito que eu queria):

 

screenhunter23aug141622.jpg

 

Para o container usei:

 

display:table;position:relative;margin:0 auto;

 

Deu tudo certo. Resultado final após passar da primeira página:

 

screenhunter24aug141622.jpg

 

 

Mesmo assim Obrigado @Marco Bruno pela atenção.

 

O segredo de tudo isso foi o conteiner. Valeuuu :grin:

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