1

estoy intentando alinear un botón al centro que está dentro de un overlay, que a su vez esta dentro de un popup, he modificado el css y he agregado style directamente en la etiqueta y no logro alinearla.

 Imagen de muestra

Asi lo tengo el css actualmente, ya he borrado todos los cambios que han fallado

.btn-submit-habeas {
/* display: block; */
padding: 12px;
width: 10%;
color: #FFF;
border: 0;
margin-top: 10px;
margin-bottom: 10px;
background: #008F16;
border-radius: 3px;
}

Y asi tengo maquetado el html del div donde se encuentra todo.

<div class="container">
    <div class="overlay" id="overlayHabeas">
        <div class="popup" id="popupHabeas">
            <p style="font-size: 20px;">
                "Autorizo el tratamiento de mis datos personales de acuerdo con la Política de privacidad que puede ser consultada en
                <a href="../documentation/Autorizacion_de_datos_personales.pdf" class="urlHabeasPdf" target="_blank" style="font-style: oblique;">aqui</a> donde se encuentran la forma de ejercer mis derechos a revocar la autorización, conocer, actualizar,
                rectificar y suprimir mi información de la política de tratamiento de datos personales y también los canales de contacto".
            </p>
            <button type="submit" class="btn-submit-habeas" value="send">Enviar</button>
        </div>
    </div>
</div>

He intentando colocarlo flex, float, items-align, text-center y no se donde está el error. Agradezco su ayuda <3

2
  • Ponle un position:absolute al popup y un position:relative al button. A ver si te funciona
    – jbort
    el 27 nov. 2021 a las 20:04
  • ¿Te funcionó text-align:center;? este es solo para alinear elementos hijos, debes agregarle al button un elemento padre: <p style="text-align:center;"><button type="submit" class="btn-submit-habeas" value="send">Enviar</button></p> el 27 nov. 2021 a las 20:29

3 respuestas 3

2

Agregando esta regla text-align: center; en el elemento padre, puedes conseguir centrar el botón y todos los elementos contenidos en el. Luego, para conservar o modificar la alineación del párrafo, puedes agregarle sus propias reglas CSS usando el selector p y así evitas tener estilos en línea.

Como recomendación final, considera darle mas width al botón para que el texto no lo desborde.

#popupHabeas {
  text-align: center;
}

.btn-submit-habeas {
  /* display: block; */
  padding: 12px;
  width: 15%;
  color: #FFF;
  border: 0;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #008F16;
  border-radius: 3px;
}

p {
  font-size: 20px;
  text-align: justify;
}
<div class="container">
  <div class="overlay" id="overlayHabeas">
    <div class="popup" id="popupHabeas">
      <p>
        "Autorizo el tratamiento de mis datos personales de acuerdo con la Política de privacidad que puede ser consultada en
        <a href="../documentation/Autorizacion_de_datos_personales.pdf" class="urlHabeasPdf" target="_blank" style="font-style: oblique;">aqui</a> donde se encuentran la forma de ejercer mis derechos a revocar la autorización, conocer, actualizar, rectificar
        y suprimir mi información de la política de tratamiento de datos personales y también los canales de contacto".
      </p>
      <button type="submit" class="btn-submit-habeas" value="send">Enviar</button>
    </div>
  </div>
</div>

2

Puedes crear una grid dentro de:

<div class="popup" id="popupHabeas">
        <p style="font-size: 20px;">
            "Autorizo el tratamiento de mis datos personales de acuerdo con la Política de privacidad que puede ser consultada en
            <a href="../documentation/Autorizacion_de_datos_personales.pdf" class="urlHabeasPdf" target="_blank" style="font-style: oblique;">aqui</a> donde se encuentran la forma de ejercer mis derechos a revocar la autorización, conocer, actualizar,
            rectificar y suprimir mi información de la política de tratamiento de datos personales y también los canales de contacto".
        </p>
        <button type="submit" class="btn-submit-habeas" value="send">Enviar</button>
    </div>

Luego al boton le añadis la propiedad:

.btn-submit-habeas {
      justify-self: center;
 }

Para mas informacion puedes buscar en: https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout

1

Prueba con margin-left: 45%; descuenta el ancho del botón, si indicas 50% te queda en el lado derecho de la línea central:

.btn-submit-habeas {
/* display: block; */
padding: 12px;
width: 15%;
color: #FFF;
border: 0;
margin-top: 10px;
margin-bottom: 10px;

margin-left: 45%;

background: #008F16;
border-radius: 3px;
}

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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