html: no puedo centrar mi botón en mi div

Sé que me lo han preguntado docenas de veces, pero estoy atascado en mi código y no entiendo por qué mi código no responde.

Me gustaría centrar mi botón de forma responsiva: debe centrarse por debajo de 768 px y tener otra reacción arriba. Alinearlo no es un problema, pero es imposible centrarlo cuando la pantalla se encoge.

Aquí está mi código:

@media (max-width: 767px) {
  #callout {
    flex-wrap: wrap;
  }
  #calloutButton {
    text-align: center !important;
  }
}

<div class="m-portlet m-portlet--mobile m-portlet--body-progress-">
  <div class="card card-custom gutter-b bg-diagonal bg-diagonal-light-primary">
    <div class="card-body">
      <div id="callout" class="d-flex align-items-center justify-content-between p-4 flex-xl-nowrap">
        <div class="d-flex flex-column mr-5 font_18">
          <a class="text-hover-primary mb-5" style="color: #002577">
            <strong>Accédez à la simulation complète</strong>
          </a>
          <p class="text-dark" align="justify">
            Pour préparer votre rendez-vous et confirmer le prêt étudiant bancaire
          </p>
        </div>
        <div id="calloutButton" class="ml-6 ml-lg-0 ml-xxl-6 flex-shrink-0 justify-content-center">
          <a href="https://stackoverflow.com/questions/66819881/{{ route('contrib_file', ['contributor_id'=>$contributor->id]) }}" class="btn font-weight-bolder text-uppercase btn-primary py-4 px-6">
            <img alt="download pdf" src='https://stackoverflow.com/questions/66819881/{{ asset("assets/images/pdf.png") }}' />&nbsp&nbsp
            <strong>Simulation</strong>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

¿Dónde está mi error? ¿Cuál es el truco para obtener un bonito botón en el centro de mi tarjeta? Soy bastante nuevo en este trabajo, lo siento si es una pregunta tonta.

Gracias por tu ayuda

2

¿Qué no te funciona? en el código que proporcionaste funciona perfectamente para mí.

- tacoshy

26/03/2021 a las 15:40

1

igual, no veo que pasa

-EDAD

26/03/2021 a las 15:42

Deberías usar class en lugar de id para dar los estilos y para tuproblema, puede agregar margen: 0 automático; esto siempre mantendrá tu div en el centro

- shashikant kuswaha

26/03/2021 a las 15:50

Hola, creo que tu fragmento necesita agregar alguna biblioteca/archivo CSS (¿arranque?); de lo contrario, solo miraremos tu centro de alineación de texto, no el entorno completo.

-A Haworth

26/03/2021 a las 16:24

¿Estás usando Bootstrap?

- j08691

26/03/2021 a las 18:42

------------------------------------

Muchas gracias, agregué margin:0 auto y funcionó a la perfección.

------------------------------------

¿Lo has probado?

.yourdiv{
  float: center;
  width: 100vw;
  text-align: center;
 }

Respondido

26 de marzo de 2021 a las 18:41

Webinador06

Webinator06

1

1

No existe nada parecido a float: center;

- j08691

26/03/2021 a las 18:42