Zentriere zwei Zeilen Text in einer Schaltfläche

Question

Ich benutze Bootstrap 4. Und ich mache einen Knopf, der ein Symbol auf der linken Seite und zwei Zeilen Text in der Mitte hat. Ich habe alles herausgefunden, außer wie man den Text vertikal anordnet. Ich habe versucht, es mit Padding und Rand zu bewegen, aber nichts. Es hängt an der Spitze.

Hier ist mein Code:

.wrap { 
 
    width: 370px; 
 
    background: #ededed; 
 
} 
 
.btn { 
 
    font-size: 10px; 
 
    background-color: gray; 
 
    color: #fff; 
 
} 
 
span { 
 
    display: block; 
 
    text-transform: lowercase; 
 
    font-size: 8px; 
 
} 
 
i { 
 
    font-size: 20px; 
 
    float: left; 
 
    background-color: black; 
 
    padding: 17px 20px; 
 
    margin-left: -15px; 
 
}

<div class="wrap p-4"> 
 
    <button type="button" class="btn border-0 py-0 rounded-0 btn-secondary btn-block"> 
 
    <i class="fa fa-apple" aria-hidden="true"></i> 
 
    Title Goes Here 
 
    <span>Subtitle Goes Here</span> 
 
    </button> 
 
</div>

Was mache ich falsch?

Vielen Dank!

Answer 1

Machen Sie das Symbol und den Text zu einem flexiblen Layout, und verwenden Sie dann die Flex-Hilfsklassen, um den Text auszurichten.

.wrap { 
 
    width: 370px; 
 
    background: #ededed; 
 
} 
 

 
.btn { 
 
    font-size: 10px; 
 
    background-color: gray; 
 
    color: #fff; 
 
} 
 

 
span { 
 
    display: block; 
 
    text-transform: lowercase; 
 
    font-size: 8px; 
 
} 
 

 
i { 
 
    font-size: 20px; 
 
    float: left; 
 
    background-color: black; 
 
    padding: 17px 20px; 
 
    margin-left: -15px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="wrap p-4"> 
 
    <button type="button" class=" btn border-0 py-0 rounded-0 btn-secondary btn-block"> 
 
    <div class="d-flex"> 
 
     <i class="fa fa-apple" aria-hidden="true"></i> 
 
     <div class="d-flex align-items-center flex-column justify-content-center col"> 
 
     Title Goes Here 
 
    <span>Subtitle Goes Here</span> 
 
     </div> 
 
    </div> 
 
    </button> 
 
</div>

Answer 2

Wenn Sie das Bootstrap-Styling hinzufügen, wird es vertikal zentriert werden.

.wrap { 
 
    width: 370px; 
 
    background: #ededed; 
 
} 
 
.btn { 
 
    font-size: 10px; 
 
    background-color: gray; 
 
    color: #fff; 
 
} 
 
span { 
 
    display: block; 
 
    text-transform: lowercase; 
 
    font-size: 8px; 
 
} 
 
i { 
 
    font-size: 20px; 
 
    float: left; 
 
    background-color: black; 
 
    padding: 17px 20px; 
 
    margin-left: -15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="wrap p-4"> 
 
    <button type="button" class="btn border-0 py-0 rounded-0 btn-secondary btn-block"> 
 
    <i class="fa fa-apple" aria-hidden="true"></i> 
 
    Title Goes Here 
 
    <span>Subtitle Goes Here</span> 
 
    </button> 
 
</div>