Align different font-sizes on same baseline
Question
I want to align texts with different font-sizes on the same baseline.
"LOREM IPSUM SED" should be on same line as "sEa tAkImAtA SaNcTuS EsT LoReM Ip" and the same with "SED NONUMY INVIDUNT UT" and "nO SeA TaKiMaTa sAnCtUs eSt"
I've already tried this which didn't worked:
Aligning different font sizes on the same line of text so it looks nice?
How to vertically align 2 different sizes of text?
Here's my current code:
html, body{ width: 100%; height:100%; font-family: Arial, sans-serif; font-size: 1rem; } *{ margin: 0; padding: 0; list-style: none; box-sizing: border-box; } .clearfix::after{ content:""; clear:both; display: block; } .entire-page{ margin: 0 5%; } .header-content > div{ width:100%; padding: 30px 0; } .left{ float:left; } .right{ float: right; } .margin-right-header{ margin-right: 30px; } .left-top{ font-size:1.5rem; font-weight:300; color:#ff0000; } .left-top > span > span{ font-weight:400; } .left-bottom > span{ font-size:0.5rem; font-weight:400; color:#999; } .left-bottom > span > span{ font-weight:400; } .right-top{ font-size:1rem; font-weight:300; color:#ff0000; } .right-bottom{ font-size:1rem; font-weight:300; color:#999; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Titel</title> </head> <body> <div class="entire-page"> <header class="clearfix"> <div> <div class="left"> <div class="left-top"><span><span>LOREM IPSUM</span> SED</span></div> <div class="left-bottom"><span style="vertical-align:baseline;">SED <span>NONUMY</span> INVIDUNT UT</span></div> </div> <div class="right margin-right-header"> <div class="right-top"><span>sEa tAkImAtA SaNcTuS EsT LoReM Ip</span></div> <div class="right-bottom"><span style="vertical-align:baseline;">nO SeA TaKiMaTa sAnCtUs eSt</span></div> </div> </div> </header> </div> </body> </html>
1 answers
solution1
0 ACCPTED 2018-01-27 00:24:05
For the vertical-align property to apply, the elements need to have display: inline-block . I added it in the following snippet, but I reorganized the HTML structure so that the aligned elements are inside the same parent element.
BTW, vertical-align: baseline is the default for display: inline-block , so you don't even need to write it - display: inline-block alone is sufficient.
html, body { width: 100%; height: 100%; font-family: Arial, sans-serif; font-size: 1rem; } * { margin: 0; padding: 0; box-sizing: border-box; } .left-top { font-size: 1.5rem; font-weight: 300; color: #ff0000; } .left-top>span>span { font-weight: 400; } .left-bottom>span { font-size: 0.5rem; font-weight: 400; color: #999; } .left-bottom>span>span { font-weight: 400; } .right-top { font-size: 1rem; font-weight: 300; color: #ff0000; } .right-bottom { font-size: 1rem; font-weight: 300; color: #999; } .top, .bottom { width: 100%; } .top>*, .bottom>* { display: inline-block; width: 46%; }
<div class="entire-page"> <header class="clearfix"> <div class="top"> <div class="left-top"> <span><span>LOREM IPSUM</span> SED</span> </div> <div class="right-top"> <span>sEa tAkImAtA SaNcTuS EsT LoReM Ip</span> </div> </div> <div class="bottom"> <div class="left-bottom"> <span>SED <span>NONUMY</span> INVIDUNT UT</span> </div> <div class="right-bottom"> <span>nO SeA TaKiMaTa sAnCtUs eSt</span></div> </div> </header> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.