Bootstrap-4: Vertikal ausrichten Bild in einem Kreis-Taste

Ich habe einen Kreis-Taste, der muss eine plus Bild in der Mitte. Die Sache ist die, ich kann nicht scheinen, um vertikal ausrichten, dass das Bild ohne Rückgriff auf irgendwelche Ränder.

Gibt es einen einfacheren, Bootstrap-y Weg, dies zu tun?

Hier ist mein code:

CSS:

.btn-circle {
  background-color: blue;
  height: 60px;
  width: 60px;
  border-radius: 50%;
}

/* the button is supposed to be a circle, but for some reason it's not showing up like that in this snippet */

HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<a class="btn btn-circle mr-3" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><img src="https://res.cloudinary.com/dt9b7pad3/image/upload/v1499509391/58a2031e6af142ce619ba2a2_plus-symbol_y6vqca.svg" height="20"></a>

InformationsquelleAutor Retros | 2017-07-08
  1. 2

    Ein Weg ist, um die <a..></a> display:flex mithilfe der mitgelieferten d-flex Klasse.

    <a class="btn btn-circle mr-3 d-flex justify-content-center align-items-center" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><img src="https://res.cloudinary.com/dt9b7pad3/image/upload/v1499509391/58a2031e6af142ce619ba2a2_plus-symbol_y6vqca.svg" class="" height="20"></a>

    Den Einsatz der entsprechenden util-Klassen-center:
    justify-content-center align-items-center

    https://www.codeply.com/go/BE0Jh6NqrL

    • Das ist es! Danke, Zim!
    InformationsquelleAutor Zim
  2. 1

    Ist das, was Sie zu erreichen versuchen? Ich vertikal zentriert die <a> mit der <img> mit

    position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%)

    Bootstrap ist border-radius schien zu überschreiben verkaufen, so fügte ich !important zu.

    CSS:

    .btn-circle {
  background-color: blue;
  height: 60px;
  width: 60px;
  border-radius: 50% !important;
}
.btn-circle a{
  display: block;
  width: 20px;
  height: 20px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.btn-circle img{
  width: 100%;
  height: 100%;
}

/* the button is supposed to be a circle, but for some reason it's not showing up like that in this snippet */

    HTML:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<a class="btn btn-circle mr-3" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><img src="https://res.cloudinary.com/dt9b7pad3/image/upload/v1499509391/58a2031e6af142ce619ba2a2_plus-symbol_y6vqca.svg"></a>

    InformationsquelleAutor Gustaf Gunér
  3. 0

    CSS:

    .btn-circle {
  background-color: blue;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  display: flex;
    align-items: center;
    
   
}

    HTML:

    <div class="container">
    <a class="btn btn-circle mr-3 d-flex justify-content-center align-items-center" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        <img style="height: 30px;padding-left:15px;" src="https://res.cloudinary.com/dt9b7pad3/image/upload/v1499509391/58a2031e6af142ce619ba2a2_plus-symbol_y6vqca.svg" class="" height="20">
    </a>
</div>

    InformationsquelleAutor Mohit
Schreibe einen Kommentar