Alinhar ao centro do site

[Lucas Gomes_412729]

Olá pessoal , estou com dificuldade para alinhar a localizaçao no meu site esta fica em baixo e eu gostaria de por tudo alinhado como um padrão

 

segue o modelo que esta o meu site .

<div class="col-md-3 col-md-offset-3">		<!-- Footer widget -->		<div class="footer-widget">			<!-- Heading -->			<center>				<h2>Contatos</h2>				<div class="contact-details">					<!-- Address / Icon -->					<i class="fa fa-map-marker br-red"></i> <span> Rua 10<br />						Nº 465 Centro<br /> Santa fé do Sul - 15775-000					</span>					<div class="clearfix"></div>					<!-- Contact Number / Icon -->					<i class="fa fa-phone br-green"></i> <span>(0xx17) 3631-0887</span>					<div class="clearfix"></div>					<!-- Email / Icon -->					<i class="facebook" class="fa fa-facebook"></i> <span><a						href="https://www.facebook.com/ildapastelaria?fref=ts"						class="facebook">Deixe Recados em nossa Fan Page </span></i></a>					<div class="clearfix"></div>				</div>				<!-- Social media icon -->				<div class="social">					<a href="https://www.facebook.com/ildapastelaria?fref=ts"						class="facebook"><i class="fa fa-facebook"></i></a> <a href="#"						class="google-plus"><i class="fa fa-google-plus"></i></a> <a						href="#" class="twitter"><i class="fa fa-twitter"></i></a> <a						href="#" class="pinterest"><i class="fa fa-pinterest"></i></a>					<div class="col-md-3 col-md-offset-3"></div>				</div>				<!--/ Footer widget end -->		</div>	</div>	<div class="colframeadelmo">		<a name="localizacao"> <iframe				src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3744.1148251936334!2d-50.925274!3d-20.212549!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sILDA+PASTELARIA+SANTA+F%C3%89+DO+SUL!5e0!3m2!1spt-BR!2sbr!4v1426295154133"				width="300" height="300" frameborder="0" style="border: 0"></iframe>	</div>	<!-- Copyright -->	</div>	</div>	</div>

 

 

obrigado

[Pimptech]

Cara.. há muitas formas de se fazer isso.

Mas a forma como eu fiz foi via CSS, pode ser que não seja compatível em TODAS as versões de TODOS os browsers, mas funciona para os atuais.

<div class="col-md-3 col-md-offset-3">  <!-- Footer widget -->  <div class="colframeadelmo" style="position: relative; top: 0; margin: 0 auto; border: 1px solid black; width: 300px;">    <a name="localizacao">      <iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3744.1148251936334!2d-50.925274!3d-20.212549!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sILDA+PASTELARIA+SANTA+F%C3%89+DO+SUL!5e0!3m2!1spt-BR!2sbr!4v1426295154133" width="300" height="300" frameborder="0" style="border:0"></iframe>  </div>    <div class="footer-widget">    <!-- Heading -->    <center>      <h2>Contatos</h2>      <div class="contact-details">        <!-- Address / Icon -->        <i class="fa fa-map-marker br-red"></i> <span> Rua 10<br /> Nº 465 Centro<br /> Santa fé do Sul  - 15775-000</span>        <div class="clearfix"></div>        <!-- Contact Number / Icon -->        <i class="fa fa-phone br-green"></i> <span>(0xx17) 3631-0887</span>        <div class="clearfix"></div>        <!-- Email / Icon -->        <i class="facebook" class="fa fa-facebook"></i> <span><a href="https://www.facebook.com/ildapastelaria?fref=ts"class="facebook">Deixe Recados em nossa Fan Page </span></i>        </a>        <div class="clearfix"></div>      </div>      <!-- Social media icon -->      <div class="social">        <a href="https://www.facebook.com/ildapastelaria?fref=ts" class="facebook"><i class="fa fa-facebook"></i></a>        <a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a>        <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>        <a href="#" class="pinterest"><i class="fa fa-pinterest"></i></a>        <div class="col-md-3 col-md-offset-3">        </div>      </div>      <!--/ Footer widget end -->  </div></div><!-- Copyright --></div></div></div>

Reorganizei seus código e coloquei a div do maps no "TOPO" do código. Inseri alguns comandos CSS de posicionamento e diminui a div do maps.

Qualquer dúvida só falar. Abraço!

[DiF]

Um adento,  

O código html  postado  contém inúmeros erros de semântica e estruturais.

Por exemplo os 3 elementos DIVs que estão fechando, não foram iniciados.

Na linha 17, os elementos estão abrindo e fechando fora de ordem.

 

Segue a ordem certa:

<i><a></a></i>

Perceba que o elemento <a> abre e fecha dentro do elemento <i>.  No jeito que está no seu, você abre o <i>, abre o <a>, fecha o <i> e fecha o <a> além de outros elementos no meio ali.

A tag <center>, não foi fechada..  e ainda assim ela é obsoleta, não deve ser mais usada, pois a centralização dos elementos são feitos via CSS.

 

Tudo isso que acontece, influencia na renderização.  Ou seja, se tem elementos postos de forma errada, certamente terá problemas na hora de posicionar.

[Pimptech]

Um adento,  

O código html  postado  contém inúmeros erros de semântica e estruturais.

Por exemplo os 3 elementos DIVs que estão fechando, não foram iniciados.

Na linha 17, os elementos estão abrindo e fechando fora de ordem.

 

Segue a ordem certa:

<i><a></a></i>

Perceba que o elemento <a> abre e fecha dentro do elemento <i>.  No jeito que está no seu, você abre o <i>, abre o <a>, fecha o <i> e fecha o <a> além de outros elementos no meio ali.

A tag <center>, não foi fechada..  e ainda assim ela é obsoleta, não deve ser mais usada, pois a centralização dos elementos são feitos via CSS.

 

Tudo isso que acontece, influencia na renderização.  Ou seja, se tem elementos postos de forma errada, certamente terá problemas na hora de posicionar.

 

@dif acredito que seja por que ele só pegou um trecho das marcações HTML.

Mas legal você perceber isso, pois pode realmente atrapalhar na renderização do website.

 

Abraço!

[Lucas Gomes_412729]

@dif acredito que seja por que ele só pegou um trecho das marcações HTML.

Mas legal você perceber isso, pois pode realmente atrapalhar na renderização do website.

 

Abraço!

Bom dia , sim eu peguei o um final do codigo que estava dando desalinhando.