将按钮与跨度内的文本对齐

Question

我正在使用 Ionic 4。我有一个 ion-footer 我想放置我的应用程序的隐私声明链接。现在看起来是这样的。我可以知道如何将按钮与文本对齐吗？或者有更好的方法吗？

HTML代码：

<ion-footer no-border class="login-footer">
  <ion-toolbar>
    <span class="login-span">Welcome to testing app. You consent to</span>
    <ion-button class="login-footer-btn" fill="clear" (click)="privacyPolicy()">Privacy Policy</ion-button>
    <span class="login-span"> and </span>
    <ion-button class="login-footer-btn" fill="clear" (click)="termsOfUse()">Terms of Use</ion-button>
    <span class="login-span">.</span>
  </ion-toolbar>
</ion-footer>

CSS代码：

.footer-title
{
    font-size: small;
    font-weight: 300;
}

.login-footer{
    padding-left: 5px;
}

.login-span
{
    font-size: small;
    font-weight: 300;
}

.login-footer-btn
{
    --padding-start: 0;
    --padding-end: 0;
    margin-top: 0;
    margin-bottom: 0;
    height: auto;
    text-transform: none;
    font-weight: 300;
    font-size: small;
    letter-spacing: 0;
}

Answer 1

试试这个

.login-footer-btn{
  display:inline-block;
  vertical-align:middle
}

将按钮与跨度内的文本对齐

Align button to text in span

html

css

ionic-framework

ionic4