在同一基线上对齐不同的字体大小
[英]Align different font-sizes on same baseline
问题描述
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" “ LOREM IPSUM SED”应与“ SEA TAKIMATTA SANNSTUTES ES LOM Ip”位于同一行，并与“ SED NONUMY INVIDUNT UT”和“ NO SEA TAKIMAMATA ESTEST”相同
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? 如何垂直对齐2种不同大小的文本？
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 个解决方案
解决方案1
0 已采纳 2018-01-27 00:24:05
For the vertical-align property to apply, the elements need to have display: inline-block . 为了应用vertical-align属性，元素需要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. 我在以下代码段中添加了它，但是我重新组织了HTML结构，以便对齐的元素位于同一父元素内。
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. 顺便说一句， vertical-align: baseline是display: inline-block的默认值，因此您甚至不需要编写它display: inline-block仅display: inline-block就足够了。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.