Wie kann man die Einrückung zwischen der ersten und der zweiten Linie innerhalb des Kreises reduzieren?

Question

Diese Ausgabe verursachte mir wirklich Probleme.

Ich habe einen Kreis. Dieser Kreis ist ein Quadrat mit Rand-Radius: 50%. Es ist auch flexibel.

Die erste Zeile enthält ein Symbol, die zweite Zeile enthält Text.

Mein Problem ist, dass sie große Einbuchtung zwischen haben, möchte ich, dass sie näher beieinander liegen. Ich kann mir nicht vorstellen, wie ich das beheben soll.

JSFiddle

HTML

<ion-content has-header="false"> 
    <div class="dashboard-grey-menu"> 
    <div class="flex row no-padding"> 
    <div class="col"> 
    <div class="circle" ui-sref='clients'> 
     <div class="ion-ionic"></div> 
     <div>Second line</div> 
    </div> 
    </div> 
    </div> 
</div> 
</ion-content> 

CSS

.dashboard-grey-menu { 
    height: 23vh; 
    background-color: #959595; 
} 

.circle { 
    border-radius: 50%; 
    width: 18vw; 
    height: 18vh; 
    background-color: #D0D0D0; 
    font-size: 1em; 
    font-weight: 900; 
    margin: auto; 
    display: flex; 
    align-items: center; 
    justify-content: space-around; 
    flex-flow: column; 
} 

Wie würden Sie lösen Dies? Danke im Voraus!

Answer 1

Lösung 1: style="padding-bottom:8vh zu Ihrem zweiten div hinzufügen Lösung 2: löschen justify-content: space-around; von .circle in css, weil Hauptgrund für diesen Raum ist dieser. U sollte es mit Padding oder Marge CSS-Befehle mit vh verwenden, um nicht zu verlieren Verantwortung