高于其他Ionic 4的元素
高于其他Ionic 4的元素
提问于 2019-09-29 02:45:59
我正在使用Ionic 5，我有一个带有文本和芯片的标签。我希望标签上的文字在芯片上，并垂直居中。
这是我的HTML代码..。
<ion-card>
<ion-item lines="none">
<ion-label class="nombre-fecha ion-text-start" color="dark">
<ion-text>
<h3 class="nombre">Julia</h3>
<p class="fecha">16 Sept, 2019</p>
</ion-text>
</ion-label>
<div class="contenedor-monto">
<ion-label class="monto ion-text-end" color="dark">$150</ion-label>
<ion-chip color="rosa">
<ion-label>Pasivo</ion-label>
</ion-chip>
</div>
</ion-item>
</ion-card>这是我的SCSS代码。
ion-card {
width: 80%;
background-color: white;
border-radius: 6rem;
height: 7rem;
}
.nombre {
font-size: 2rem;
font-weight: bold;
color: black;
}
.fecha {
line-height: 1rem;
font-size: 1.3rem;
}
.contenedor-monto {
display: flex;
}
.monto {
font-size: 1.8rem;
font-weight: bold;
}
ion-chip {
height: 2.5rem;
}现在我得到了..。
但我需要这个。
回答 1
Stack Overflow用户
发布于 2019-09-29 19:05:35
对于已经启动的解决方案，只需将flex-direction设置为columns即可。你需要查找这个来获得准确的代码片段，通常你需要几个版本才能兼容所有常见的浏览器。
但是，我会使用一个有两行的网格，然后调整它以删除任何填充：
类似于：
<div class="contenedor-monto">
<ion-grid no-padding>
<ion-row>
<ion-col>
<ion-label class="monto ion-text-end" color="dark">$150</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-chip color="rosa">
<ion-label>Pasivo</ion-label>
</ion-chip>
</ion-col>
</ion-row>
</ion-grid>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58149299
复制相关文章
相似问题
腾讯云开发者
