垂直对齐不同大小的文本

Question

我有2条文字。一个在左对齐，另一个在右对齐。左边的一个大于右边的一个。如何使它们彼此垂直居中对齐？

<section role="outer" class="bg-cover section section-fullWidthContent position-relative first">
    <div class="container">
        <div class="d-flex">
            <div>
                <h1 class="section-title">Title</h1>
            </div>
            <div class="ml-auto">
                <a href="" class="text-md-right"><h1 class="xsmall-title">See All</h1></a>
            </div>
        </div>
        <hr/>
    </div>
</section>

---

.section-title {
    font-weight: 900;
    text-transform: uppercase;
}

.xsmall-title {
    font-weight: 400;
    font-size: 1.3em;
    text-transform: uppercase;

}

Answer 1

只需在包含两个元素的外部div上添加一个align-items-center

<section role="outer" class="bg-cover section section-fullWidthContent position-relative first">
    <div class="container">
        <div class="d-flex align-items-center">
            <div>
                <h1 class="section-title">Title</h1>
            </div>
            <div class="ml-auto">
                <a href="" class="text-md-right"><h1 class="xsmall-title">See All</h1></a>
            </div>
        </div>
        <hr/>
    </div>
</section>

Answer 2

尝试一下

.section-title {
    font-weight: 900;
    text-transform: uppercase;
}

.xsmall-title {
    font-weight: 400;
    font-size: 1.3em;
    text-transform: uppercase;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<section role="outer" class="bg-cover section section-fullWidthContent position-relative first">
  <div class="container">
    <div class="d-flex flex-row justify-content-between align-items-center">
      <h1 class="section-title">Title</h1>
      <a href="#" class="xsmall-title">See All</a>
    </div>
    <hr />
  </div>
</section>

Answer 3

我将属性alt.Chart(source).mark_line( point=alt.OverlayMarkDef(filled=False, fill='white') ).encode( x='date', y='price', color='symbol' ) 添加到了包装类中，似乎可以完成工作。