Poorly centered elements

1

Good, why do the map and the text below appear off center?

This on the computer screen does not happen to me, it happens to me when the width of the screen is less than 1200 px (approx) , ie an iPad screen for example.

How could I solve this?

h2 {
  font-size: 35px;
  text-align: center;
  padding-bottom: 40px;
}

h3 {
  text-align: center;
  margin-bottom: 20px;
}

.General {
  width: 100%;
  padding: 50px;
  box-sizing: border-box;
}

.MisDatos {
  height: auto;
  width: 75%;
  margin: 0 auto;
  text-align: center;
}

.Mapa-MisDatos {
  width: 800px;
  margin: 20px;
}

.Datos-MisDatos {
  width: 800px;
  background-color: burlywood;
  color: #FFF;
  margin: 0 auto;
  padding: 10px;
}

.Datos-MisDatos a {
  color: black;
  background-color: darkgray;
  cursor: pointer;
}

.Datos-MisDatos a:hover {
  color: white;
  background-color: dimgrey;
}
<div class="General General-MisDatos">

  <div class="MisDatos">

    <a name="Mis-Datos"></a>

    <h2>¿Nos vemos?</h2>

    <p class="Texto-MisDatos">
      A continuación tienes nuestros datos para localizarnos.
    </p>

    <div class="Estructura-MisDatos">

      <img src="Img/Mapa.PNG" class="Mapa-MisDatos" alt="Mapa localización empresa">

      <p class="Datos-MisDatos">
        C/ Archiduque Luís Salvador, Nº 27, Piso 2, Puerta B
        <br> Palma de Mallorca, Islas Baleares, España
        <br><br> Tlf: +034 698 256 527
        <br> eMail consultas: [email protected]
        <br> eMail trabajo: <a href="#Contacto"> Pincha aquí </a>
        <br><br> Horario de oficina: 10:00 - 18:00
      </p>
    </div>
  </div>
</div>
    
asked by NEA 13.09.2017 в 13:23
source

3 answers

2

.MisDatos you have width: 75%; so the left side is taking space, and occupies exactly 800px. Being greater than those 75% appears off center (more to the right than centered).

Example: Width of 2000px, with 75% remaining in 1500px. 800px enter those 1500px, so SI is centered.

Example2: Width of 1000px, with 75% remaining at 750px. 800px does not fit into those 750px, so it will NOT be centered and it will stick out to the right.

I leave you commented the width:75%; and see how it does not happen until it reaches 800px.

To control devices with a width less than 800px you need to use media queries.

h2 {
  font-size: 35px;
  text-align: center;
  padding-bottom: 40px;
}

h3 {
  text-align: center;
  margin-bottom: 20px;
}

.General {
  width: 100%;
  padding: 50px;
  box-sizing: border-box;
}

.MisDatos {
  height: auto;
  /*width: 75%;*/
  margin: 0 auto;
  text-align: center;
}

.Mapa-MisDatos {
  width: 800px;
  margin: 20px;
}

.Datos-MisDatos {
  width: 800px;
  background-color: burlywood;
  color: #FFF;
  margin: 0 auto;
  padding: 10px;
}

.Datos-MisDatos a {
  color: black;
  background-color: darkgray;
  cursor: pointer;
}

.Datos-MisDatos a:hover {
  color: white;
  background-color: dimgrey;
}
<div class="General General-MisDatos">

  <div class="MisDatos">

    <a name="Mis-Datos"></a>

    <h2>¿Nos vemos?</h2>

    <p class="Texto-MisDatos">
      A continuación tienes nuestros datos para localizarnos.
    </p>

    <div class="Estructura-MisDatos">

      <img src="Img/Mapa.PNG" class="Mapa-MisDatos" alt="Mapa localización empresa">

      <p class="Datos-MisDatos">
        C/ Archiduque Luís Salvador, Nº 27, Piso 2, Puerta B
        <br> Palma de Mallorca, Islas Baleares, España
        <br><br> Tlf: +034 698 256 527
        <br> eMail consultas: [email protected]
        <br> eMail trabajo: <a href="#Contacto"> Pincha aquí </a>
        <br><br> Horario de oficina: 10:00 - 18:00
      </p>
    </div>
  </div>
</div>
    
answered by 13.09.2017 в 13:43
2

The first thing I think it would be that the map was in line with the data box, for that you should change this:

.Mapa-MisDatos {
  width: 800px;
  margin: 20px;
}

By

.Mapa-MisDatos {
  width: 800px;
  margin: 20px 0px;
}

As for the general problem, I'd say it's here:

.MisDatos {
  height: auto;
  **width: 75%;**
  margin: 0 auto;
  text-align: center;
}

.Mapa-MisDatos {
  **width: 800px;** 
  margin: 20px;
}

When the screen is smaller, and the size of 75% of the container is less than the 800px content, the party starts ... That could explain why it happens on screens less than 1200px as you say.

Try this to see if you solve it, copy these settings:

.MisDatos {
  height: auto;
  width: 100%;
  max-width: 800;
  margin: 0 auto;
  text-align: center;
}
    
answered by 13.09.2017 в 13:46
1

Very simple:

Add max-width: 100%; to .Datos-MisDatos and% .Mapa-MisDatos will adapt to the screen:

.Mapa-MisDatos, .Datos-MisDatos {
    max-width: 100%;
}
    
answered by 13.09.2017 в 14:19