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
    Commented 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>
    – DABL03
    Commented 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

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.