2

Tengo un problema y es que como puedo alinear a la izquierda el boton de contacto y a la derecha el iframe de Google Maps de forma de que tdo alineado ya que he estado intentandolo .

Os paso el codigo

  <section class="contacte" id="section6">
  <form method="POST" action="contactar.php"> 
  <button type="submit"  class="button" name='env'>Contacte</button>
 
<div id="mapa">
 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11963.503810481645!2d2.2137249746337933!3d41.441913199422075!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12a4bcbd124a13e7%3A0x4602182533bf5a10!2sFundaci%C3%B3%20Hospital%20de%20l&#39;Esperit%20Sant!5e0!3m2!1sca!2ses!4v1613580231213!5m2!1sca!2ses" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
  </section>

CSS

.contacte{
    text-align: left;
    padding:0.2%;
    background-color: #2686E3;
    padding-bottom: 5%;
    
  }
0

1 respuesta 1

2

Como puedes leer en este enlace, la propiedad text-align sirve para:

  • Establecer la alineación horizontal del contenido de un elemento en bloque o un table cell box

Con lo anterior en mente considera que al hacer: text-align: left; lo que estarías desplazando horizontalmente a la izquierda serían ambos elementos internos de la etiqueta section.

Sin embargo lo anterior no es lo que propiamente estamos buscando, entonces una opción es el uso del módulo flexbox

Quedando de esta forma:

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .contacte {
    display: flex;
    justify-content: center;
  }
  iframe {
    width: 500px;
    height: 200px;
  }
</style>

<section class="contacte" id="section6">
  <form method="POST" action="contactar.php"> 
    <button type="submit"  class="button" name='env'>Contacte</button>
  </form>
  <div id="mapa">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11963.503810481645!2d2.2137249746337933!3d41.441913199422075!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12a4bcbd124a13e7%3A0x4602182533bf5a10!2sFundaci%C3%B3%20Hospital%20de%20l&#39;Esperit%20Sant!5e0!3m2!1sca!2ses!4v1613580231213!5m2!1sca!2ses" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
  </div>
</section>

Lecturas de interés

2
  • Creo que el código queda mejor en un snippet, no se si te ha pasado por alto o había alguna buena razón –que yo no vi– para no hacerlo. Por si era la primera, edité la respuesta. Si era la segunda, por favor reviértela o dejame saber para revertirla yo mismo. Un saludo.
    – jachguate
    el 2 may. 2021 a las 1:47
  • 1
    @jachguate te agradezco la edición, no lo coloqué como snnipet por que lo pasé por alto, gracias.
    – BetaM
    el 2 may. 2021 a las 1:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.