วิธีจัดข้อความ 2 ขนาดที่แตกต่างกันในแนวตั้ง

ฉันรู้ว่าการจัดข้อความในแนวตั้งตรงกลางบล็อกคุณตั้งค่าความสูงของบรรทัดให้เท่ากับความสูงของบล็อก

2emแต่ถ้าผมมีประโยคด้วยคำที่อยู่ตรงกลางที่เป็น ถ้าทั้งประโยคมีความสูงบรรทัดเดียวกับบล็อกที่มีข้อความขนาดใหญ่จะถูกจัดแนวในแนวตั้ง แต่ข้อความที่เล็กกว่าจะอยู่บนเส้นฐานเดียวกันกับข้อความขนาดใหญ่

ฉันจะตั้งค่าให้ข้อความทั้งสองขนาดอยู่ในแนวตั้งได้อย่างไรดังนั้นข้อความที่ใหญ่กว่าจะอยู่บนเส้นฐานต่ำกว่าข้อความขนาดเล็ก

ลองใช้vertical-align:middle;ตู้คอนเทนเนอร์แบบอินไลน์ไหม

แก้ไข: ใช้งานได้ แต่ข้อความทั้งหมดของคุณต้องอยู่ในคอนเทนเนอร์แบบอินไลน์ดังนี้:

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

ฟังก์ชันที่คุณเห็นนั้นถูกต้องเนื่องจากค่าเริ่มต้นสำหรับ "จัดแนวตั้ง" เป็นค่าพื้นฐาน vertical-align:topปรากฏว่าคุณต้องการ มีตัวเลือกอื่น ๆ ดูที่นี่ที่W3Schools

แก้ไข W3Schools ไม่ได้ทำความสะอาดการกระทำของพวกเขาและยังดูเหมือนว่าจะเป็นแหล่งข้อมูลที่ต่ำ (ที่ดีที่สุด) ตอนนี้ผมใช้sitepoint เลื่อนไปที่ด้านล่างของหน้าแรก sitepoint เพื่อเข้าถึงส่วนอ้างอิง

ข้อความทั้งสองชุดต้องมีความสูงของเส้นคงที่เท่ากันและชุดแนวตั้ง

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

อย่างไรก็ตามในทางเทคนิคคุณไม่สามารถทำได้หากคุณมีขนาดข้อความคงที่คุณสามารถใช้การวางตำแหน่ง (สัมพัทธ์) เพื่อเลื่อนข้อความขนาดใหญ่ลงและตั้งค่าความสูงของบรรทัดให้เป็นข้อความที่เล็กลง (ฉันคิดว่าข้อความที่ใหญ่กว่านี้ถูกทำเครื่องหมายไว้เช่นนี้ เพื่อให้คุณสามารถใช้เป็นตัวเลือก CSS)

คุณสามารถใช้ขนาดเปอร์เซ็นต์เพื่อนำไปใช้ซ้ำของผู้ปกครองได้ 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 

วิธีง่ายๆ - ใช้ 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>

ตัวเลือกคือการใช้ตารางที่มีข้อความขนาดต่างๆอยู่ในเซลล์ของตนเองและใช้ align: middle ในแต่ละเซลล์

มันไม่สวยและใช้ไม่ได้กับทุกโอกาส แต่มันง่ายและใช้ได้กับทุกขนาดตัวอักษร

นี้ได้ผล

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>