2

Queria consultarles como hago para alinear mi botón al centro o si se puede establecer coordenadas precisas para alinearlo.Les dejo una parte de mi codigo : Html:

<a class="boton_personalizado"  href="aqui la direcc">Soy un botón</a>

css:

 .boton_personalizado{
    text-decoration: none;
    padding: 10px;
    font-weight: 600;
    font-size: 20px;
    color: #ffffff;
    background-color: transparent;
    border-radius: 0px;
    border: 2px solid #EDD8D8;


  }
  .boton_personalizado:hover{
    color: #EDD8D8;
    background-color: transparent;
  }
5
  • Con Ibuprofeno cada 8 horas Commented el 8 sept. 2020 a las 3:26
  • Alinear al centro vertical u horizontalmente?
    – user128299
    Commented el 8 sept. 2020 a las 3:27
  • Horizontalmente Commented el 8 sept. 2020 a las 3:30
  • Ponlo dentro de un div y usas css con position: absolute
    – Ceragos
    Commented el 8 sept. 2020 a las 4:12
  • Bueno también verticalmente si se puede . Commented el 8 sept. 2020 a las 4:42

3 respuestas 3

3

Tomemos en cuenta lo siguiente:

  • Lo que tratas de centrar horizontalmente es un elemento en línea
  • La propiedad que pudiera auxiliarnos es text-align con un valor de center
  • El problema es que esta propiedad trabaja para la distribución horizontal de los elementos de tipo en bloque como puedes leer en el enlace provisto mas arriba

Dados los puntos anteriores, la opción mas simple es meter dentro de un elemento en bloque como un p a tu etiqueta a y que el centrado se aplique al primero mencionado y en concencuencia afecte a su contenido o etiqueta interna.

    <style>
      #centrado {
        text-align: center;
      }
    </style>
    
    <p id="centrado">
      <a href="#">Ir a ningún lugar</a>
    </p>

Lectura altamente recomendada

0

te recomiendo usar un codigo más sencillo, puedes hacerlo agregando en el "" dos lineas de código que hacen referencia a los archivos de CSS y JS de Bootrap, con el fin que lo hagas de una forma mas sencilla con clases de Bootstrap.

Te recomiendo hacerlo de esta forma, ya los estilos se los puede aplicar en el CSS como tu gustes.

<!DOCTYPE html>
<html>
    <head>
        
        <title>Titulo web</title>

        <!--  CSS Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

        <!--  JS Bootstrap -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

    </head>
    <body>

        <div class="d-flex justify-content-center " id="boton">
            <a class="btn btn-primary">Soy un botón</a>
        </div>

    </body>
</html>

En teoría lo que hice fue, a la etiqueta le aplique las clases "btn btn-primary", luego encerré esa etiqueta dentro de un que lleva un ID el cual podrás usar en el CSS para aplicar los estilos personalizados que desees, al le puse unas clases de Bootstrap "d-flex justify-content-center" y de esta manera el botón ya está centrado Horizontalmente.

Espero te sea de ayuda.

0

Aplica flexbox a la etiqueta padre en la que vayas a poner a tu enlace

html:

<div>
   <a class="boton_personalizado"  href="aqui la direcc">Soy un botón</a>
</div>

css:

div{
  border:1px solid;
  display:flex;
  justify-content:center;
  align-items:center;
}

De esta manera quedará centrado horizontal y verticalmente, pero ojo porque aplicará para todos los elementos dentro del div y el centro se calculará en base al tamaño del mismo.

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.