1

Necesito que las cajas me queden proporcionalmente centradas dentro del footer y no logro que la última caja de redes me quede a la misma altura que las otras pero alineada a la derecha

Muchas gracias por vuestra ayuda

Necesito que las cajas me queden proporcionalmente centradas dentro del footer y no logro que la última caja de redes me quede a la misma altura que las otras pero alineada a la derecha

Muchas gracias por vuestra ayuda

.footergeneral{
    width: 100%;
    height: 300px;
 }

.footers{
    background-color: aquamarine;
    width: 30%;
    height: 270px;
    padding-left: 15px;
    padding-top: 15px;    
}

.footercontacto{
    float: left;
}

.footermapa{
    margin-left: auto;
    margin-right: auto;
}

.footerredes{
    position: static ;
    margin-top: 0;
    float: right;
}
<footer class="footergeneral">
            <div class="footers footercontacto">
                <h2>Contacto</h2>
                <p>Dirección: Av. nsndma 73767</p>
                <p>Teléfono: 2205 5807</p>
                <p>Email: mailto:[email protected]</p>
                <p>Horario: Lunes a Viernes de 9 a 20
                            Sabados 9 a 20
                </p>
            </div>

            <div class="footers footermapa">
                <h2>Mapa</h2>
                <p>Dirección: Av. nsndma 73767</p>
                <p>Teléfono: 2205 5807</p>
                <p>Email: mailto:[email protected]</p>
                <p>Horario: Lunes a Viernes de 9 a 20
                            Sabados 9 a 20
                </p>
            </div>

            <div class="footers footerredes">
                <h2>Mapa</h2>
                <p>Dirección: Av. nsndma 73767</p>
                <p>Teléfono: 2205 5807</p>
                <p>Email: mailto:[email protected]</p>
                <p>Horario: Lunes a Viernes de 9 a 20
                            Sabados 9 a 20
                </p>
            </div>
        </footer>

2 respuestas 2

2

Puedes lograrlo de manera mas efectiva con la implementación de FlexBox, realizando lo siguiente:

  • Al elemento contenedor de tus 3 secciones que sería la etiqueta footer dale una disposición de tipo flex
  • El paso anterior ubicará los elementos sobre el eje principal o main axis
  • Para lograr disponer los elementos con una distribución personalizada, podrás modificar la propiedad justify-content también del contenedor con alguna de las siguientes opciones:
    • center
    • space-between
    • space-around
    • end
    • start (esta es la opción de distribución que ya tiene por defecto)

EJEMPLO

    <style>
      :root {
        --color-fuente: #fff;
      }
      .footergeneral {
        background-color: crimson;
        display: flex;
        margin: 0 auto;
        justify-content: space-between;
        width: 600px;
      }
      .elemento1 {
        color: var(--color-fuente);
      }
    </style>
    <div class="footergeneral">
      <div class="elemento1">
        <p>
          hola Mundo 1
        </p>
      </div>
      <div class="elemento1">
        <p>
          Hola mundo 2
        </p>
      </div>
      <div class="elemento1">
        <p>
          Hola Mundo 3
        </p>
      </div>
    </div>

Y con una salida así:

introducir la descripción de la imagen aquí

Referencia

1
  • 1
    Gracias amigo !!!!!!!! Commented el 20 may. 2020 a las 2:28
0

Para alinear proporcionalmente bloques de contenido como tienes en tu html haciendo lo siguiente:

  • Sin bootstrap

Colocando en .footergeneral un grid se haría la alineación de forma sencilla ya que tienes cada bloque bien estructurado dentro de los div. En el CSS:

.footergeneral{
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
}
  • Con bootstrap

Tal y como se detalla en la documentación puedes hacer la clase footergeneral como row y los bloques como col para que funcionara. Para una mejor praxis, es mejor crear un div padre que englobe a todos los bloques y no modificar todo el footer.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
        <footer class="footergeneral">
            <div class="row">
                <div class="footers footercontacto col">
                    <h2>Contacto</h2>
                    <p>Dirección: Av. nsndma 73767</p>
                    <p>Teléfono: 2205 5807</p>
                    <p>Email: mailto:[email protected]</p>
                    <p>Horario: Lunes a Viernes de 9 a 20
                                Sabados 9 a 20
                    </p>
                </div>

                <div class="footers footermapa col">
                    <h2>Mapa</h2>
                    <p>Dirección: Av. nsndma 73767</p>
                    <p>Teléfono: 2205 5807</p>
                    <p>Email: mailto:[email protected]</p>
                    <p>Horario: Lunes a Viernes de 9 a 20
                                Sabados 9 a 20
                    </p>
                </div>

                <div class="footers footerredes col">
                    <h2>Mapa</h2>
                    <p>Dirección: Av. nsndma 73767</p>
                    <p>Teléfono: 2205 5807</p>
                    <p>Email: mailto:[email protected]</p>
                    <p>Horario: Lunes a Viernes de 9 a 20
                                Sabados 9 a 20
                    </p>
                </div>
            </div>
        </footer>

Tu Respuesta

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

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