如何减少圆圈内第一条线和第二条线之间的缩进？

我有一个圆圈。该圆圈与border-radius：50％。它也是flex。

第一行包含一个图标，第二行包含文本。

我的问题是他们之间有很大的缩进，我希望他们更接近对方。我无法想出如何解决这个问题。

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; 
}

你会如何解决这个？提前致谢！

来源

2016-04-21 Billy Logan

解决方案1：将style="padding-bottom:8vh添加到您的第二个div 解决方案2：从circle中删除justify-content: space-around;，因为这个空间的主要原因就在于此。 ü应该使用填充或边距css命令使用vh不会失去响应民事

来源

2016-04-21 13:35:02

在第二种情况下对准刹车。 –

它可以用于填充顶部到第一个，但圆圈通常不响应，它给出的宽度和高度都是相同的值，如果圆圈响应正常并且效果良好，则可以使用填充顶部。 –

如何减少圆圈内第一条线和第二条线之间的缩进？

回答

相关问题