Elemento não centraliza

[Vitor Luis_78306 0]

Caros,

Tudo bem com vocês?

 

Estou desenvolvendo um website responsivo, baseado em layout fluído e media queries, porém estou enfrentando um problema no alinhamento de um elemento específico, o link da div.Button, confira:

		<section class="Contact">
			<div class="Text">
				<h1>XYZ</h1>
				<p>xxx xxx xxx xxx xxx xxx xxx xxx xxx <br>
				xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx</p>
			</div>

			<div class="Button">
				<a href="" target="_self">xxxxxx xxx</a>
			</div>
		</section>

Que como padrão tem o seguinte css:

#Home .Contact			{ background:#DDD; background:linear-gradient(to bottom, #DDD 0%, #EEE 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#DDDDDD', endColorstr='#EEEEEE', GradientType=0); width:90%; height:auto; padding:0 5%; float:left; position:relative; }

#Home .Contact .Text 	{ width:75%; height:auto; margin:10px 0; float:left; }
#Home .Contact .Text p	{ font-size:1.7rem; }
#Home .Contact .Text h1	{ font-weight:bold; font-size:3rem; }

#Home .Contact .Button	{ width:20%; height:auto; margin:-25px 0; float:right; position:absolute; top:50%; right:5%; }
#Home .Contact .Button a{ background:#333; color:#FFF; text-decoration:none;  text-align:center; font-weight:bold; fon

E para o media query o seguinte css:

	#Home .Contact .Text	{ width:100%; height:auto; }
	#Home .Contact .Text p	{ font-size:1rem; text-align:center; }
	#Home .Contact .Text h1	{ font-size:2rem; text-align:center; }

	#Home .Contact .Button	{ width:100%; height:auto; margin:10px auto; clear:both; position:static; background:#F00; }
	#Home .Contact .Button a{ margin:0 auto; clear:both; float:none; }

Só que infelizmente o botão fica jogado na esquerda, e nada, nada, nada o faz centralizar.

Alguém consegue me ajudar a resolver este problema?

[Electronic 124]

O codigo que você postou faz ele ficar na direta

você colocou position absolut e float rigth, float não funciona com position absolut

 

troque por isso

http://jsfiddle.net/fn8jpffz/1/

Contact .Button {
    width:20%;
    height:auto;
    margin: 0 auto;
     
}

[Vitor Luis_78306 0]

Electronic,

Preciso que para o layout padrão ele realmente esteja na direita, enquanto para a media query, ele esteja centralizado!

[Electronic 124]

Electronic,

Preciso que para o layout padrão ele realmente esteja na direita, enquanto para a media query, ele esteja centralizado!

 

A div .Button está com largura 100% --- o que faz margin: auto; ser inutil

de uma largura ao botao,

adicione text-align:center;

margin:0 auto; clear:both; float:none; --- deveriam is no div e não no link

 

veja se é isso

http://jsfiddle.net/fn8jpffz/2/

[Vitor Luis_78306 0]

Electronic,

Agora minha query ficou assim:

	#Home .Contact .Text	{ width:100%; height:auto; }
	#Home .Contact .Text p	{ font-size:1rem; text-align:center; }
	#Home .Contact .Text h1	{ font-size:2rem; text-align:center; }

	#Home .Contact .Button	{ width:auto; height:auto; margin:10px auto; float:none; clear:both; position:static; background:#F00; }
	#Home .Contact .Button a{ float:none; }

Mas mesmo assim estou com problemas, não deixando centralizado.

Voltando o tamanho do .Button a 100%, percebi que está faltando 10% do tamanho ainda para completar o tamanho, quando deixo com 110% tudo fica perfeito!

 

Percebi então que mesmo alterando o position para static, o right de 5% definido no estilo padrão ainda estava ativo! Para tudo funcionar, tive que fazer o seguinte:

#Home .Contact .Button	{ width:100%; height:auto; margin:10px auto; padding:10px 0; clear:both; float:none; position:relative; right:0!important; }

/* O padding:10px 0; é para a div seguir o mesmo tamanho do link, respeitando assim seus margins. */

Muito obrigado por me ajudar a achar o caminho!