Así que estoy haciendo un botón con un icono de la izquierda. Y la alineación está en mal estado. Mi texto no medio alinee con el icono y no tengo idea de cómo solucionar este problema. Línea-altura no parece hacer nada. O tocar el relleno/márgenes porque he añadido el relleno en el icono de la zona, porque necesito que sea más oscuro que el fondo del texto.

Aquí está la vista previa de la imagen:

Bootstrap 4: Botón alinear el texto con el icono de

Es hay alguna manera de fijar la alineación? O hay una manera para hacer este tipo de un botón más fácil con Bootstrap 4?

Aquí está mi código:

CSS:

.btn-primary {
    background-color: #3382c7;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    span {
      padding-left: 25px;
      padding-right: 25px;
    }
    i {
      font-size: 20px;
      background-color: #306fa5;
      padding: 15px 20px;
    }
  }

HTML:

<a href="#" class="btn btn-primary border-0 rounded-0 p-0">
  <i class="fa fa-play" aria-hidden="true"></i>
  <span>Click here to Play</span>
</a>

  • Usted debe establecer el relleno de la a etiqueta, de manera que el texto se pone en el medio y tal vez incluso si u ponerlo como padding: auto; se puede trabajar
InformationsquelleAutor Retros | 2017-05-03

3 Comentarios

  1. 6

    Uso align-middle clase en el espacio y el icono..

    <div class="container">
        <a href="#" class="btn btn-primary border-0 rounded-0 p-0">
            <i class="fa fa-play align-middle" aria-hidden="true"></i>
            <span class="align-middle">Click here to Play</span>
        </a>
    </div>

    http://www.codeply.com/go/xuiy1703Dv

    • he probado el fragmento, si se quita alinear de clase media-nada cambia
  2. 0

    Probar este! si esto no funciona, tratar de dar el vertical-align:middle; propiedad en el icono demasiado.

    CSS:

    .btn-primary {
        background-color: #3382c7;
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
        span {
          padding-left: 25px;
          padding-right: 25px;
        }
        i {
          font-size: 20px;
          background-color: #306fa5;
          padding: 15px 20px;
          vertical-align:middle;
        }
      }

    HTML:

    <a href="#" class="btn btn-primary border-0 rounded-0 p-0">
      <i class="fa fa-play" aria-hidden="true"></i>
      <span>Click here to Play</span>
    </a>

  3. 0

    Si se hacen display: inline-block y vertical-align: middle se debe trabajar para usted

    CSS:

    .btn-primary {
        background-color: #3382c7;
        display: inline-block;
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
    }
    
    .btn-primary span {
        display: inline-block;
        padding-left: 25px;
        padding-right: 25px;
        vertical-align: middle;
    }
    
    .btn-primary i {
        font-size: 20px;
        display: inline-block;
        background-color: #306fa5;
        padding: 15px 20px;
        vertical-align: middle;
    }

    HTML:

    <a href="#" class="btn btn-primary border-0 rounded-0 p-0">
      <i class="fa fa-play" aria-hidden="true"></i>
      <span>Click here to Play</span>
    </a>

Dejar respuesta

Please enter your comment!
Please enter your name here