Home / Questions / 448684
Accepted
Josep Giner
Asked: 2022-05-02 01:55:21 +0800 CST 2022-05-02 01:55:21 +0800 CST

How can I align a button with the iframe of google maps?

  • 772

I have a problem and it is how I can align the contact button to the left and the iframe of Google Maps to the right so that everything is aligned since I have been trying.

I pass you the code

  <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%;
    
  }
html

1 Answers

  1. Best Answer

    As you can read in this link , the property text-alignis used to:

    • Set the horizontal alignment of the content of a block element or a table cell box

    With the above in mind, consider that by doing: text-align: left;what you would be scrolling horizontally to the left would be both inner elements of the section.

    However, the above is not exactly what we are looking for, so one option is to use the flexbox module .

    Being this way:

    <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>

    interesting reading

    • 2