Làm thế nào để căn chỉnh theo chiều dọc 2 kích thước văn bản khác nhau?

Tôi biết để căn chỉnh theo chiều dọc văn bản vào giữa khối, bạn đặt chiều cao dòng bằng cùng chiều cao của khối.

Tuy nhiên, nếu tôi có một câu với một từ ở giữa, đó là 2em. Nếu toàn bộ câu có chiều cao dòng bằng với khối chứa, thì văn bản lớn hơn được căn chỉnh theo chiều dọc nhưng văn bản nhỏ hơn nằm trên cùng đường cơ sở với văn bản lớn hơn.

Làm cách nào tôi có thể đặt nó để cả hai kích thước văn bản đều được căn chỉnh theo chiều dọc, vì vậy văn bản lớn hơn sẽ nằm trên đường cơ sở thấp hơn văn bản nhỏ hơn?

Thử vertical-align:middle;các vùng chứa nội tuyến?

EDIT: nó hoạt động nhưng tất cả văn bản của bạn phải ở trong một vùng chứa nội tuyến, như thế này:

    <div style="height:100px; line-height:100px; background:#EEE;">
        <span style="vertical-align:middle;">test</span>
        <span style="font-size:2em; vertical-align:middle;">test</span>
    </div>

Chức năng bạn đang thấy là chính xác vì mặc định cho "vertical-align" là đường cơ sở. Có vẻ như bạn muốn vertical-align:top. Có những lựa chọn khác. Xem tại đây tại W3Schools .

Chỉnh sửa W3Schools đã không làm sạch hành động của họ và vẫn có vẻ là một nguồn thông tin kém chất lượng (tốt nhất). Bây giờ tôi sử dụng sitepoint . Cuộn xuống cuối trang đầu của điểm hẹn để truy cập các phần tham khảo của họ.

hai tập hợp văn bản phải có cùng chiều cao dòng cố định và tập hợp căn chỉnh theo chiều dọc

 span{
     vertical-align: bottom;
     line-height: 50px;
}

Về mặt kỹ thuật, bạn không thể, tuy nhiên, nếu bạn có kích thước văn bản cố định, bạn có thể sử dụng định vị (tương đối) để di chuyển văn bản lớn hơn xuống và đặt chiều cao dòng thành văn bản nhỏ hơn (tôi cho rằng văn bản lớn hơn này được đánh dấu như vậy vì vậy bạn có thể sử dụng nó như một bộ chọn CSS)

Bạn có thể sử dụng kích thước phần trăm để áp dụng lại line-height

.big {
  font-size: 200%;
  line-height: 25%;
  display: inline-block;
  vertical-align: middle;
}

Utque aegrum corpus <span class="big">etiam</span> levibus solet offensis 

Một tùy chọn là sử dụng một bảng có các văn bản có kích thước khác nhau nằm trong các ô riêng của chúng và sử dụng align: middle trên mỗi ô.

Nó không đẹp và không hoạt động cho mọi trường hợp, nhưng nó đơn giản và hoạt động với mọi kích thước văn bản.

Những công việc này

header > span {
    margin: 0px 12px 0px 12px;
    vertical-align:middle;
}
.responsive-title{
    font-size: 12vmin;
    line-height: 1em;
}
.responsive-subtitle{
    font-size: 6vmin;
    line-height: 2em;
}

<header>
  <span class="responsive-title">Foo</span>
  <span class="responsive-subtitle">Bar</span>
</header>

Cách dễ dàng - sử dụng flex:

<div>
        abcde
        &nbsp;&nbsp;
        <span>efghai</span>
</div>

<style>
    div {
        padding: 20px;
        background-color: orange;
        display: flex;
        align-items: center; }

    span {
        font-size: 1.5em; }
</style>