Question

我想在同一基线上对齐不同字体大小的文字。

“LOREM IPSUM SED”应与“sEa tAkImAtA SaNcTuS EsT LoReM Ip”相同，与“SED NONUMY INVIDUNT UT”和“nO SeA TaKiMaTa sAnCtUs eSt”相同

我已经尝试过这个没用的东西：

Aligning different font sizes on the same line of text so it looks nice?

How to vertically align 2 different sizes of text?

这是我目前的代码：

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>

Answer 1

要应用vertical-align属性，元素需要display: inline-block。我在下面的代码片段中添加了它，但是我重新组织了HTML结构，以便对齐的元素位于同一个父元素中。

BTW，vertical-align: baseline是display: inline-block的默认设置，因此您甚至不需要编写它 - 仅display: inline-block就足够了。

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

在同一基线上对齐不同的字体大小

1 个答案: