Question

出于某种原因，他们只是不想在flex行中处于基线以下：

div {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

h1 {
  font-size: 22px;
  display: flex;
  align-items: baseline;
  vertical-align: baseline;
}

h2 {
  font-weight: 16px;
  display: flex;
  align-items: baseline;
  vertical-align: baseline;
}

<div>
  <h1>H1</h1>
  <h2>H2</h2>
</div>

Answer 1

您可以将所有的CSS代码替换为

div {
    display: flex;
    justify-content: center;
    align-items: baseline;
}

h1 {
    font-size: 22px;
}

h2 {
    font-weight: 16px;
}

Flex允许您为baseline指定align-items

Answer 2

更改主要CSS wrapper的{{1}}属性，并删除align-items: baseline;和CSS的其他H1

H2

div {
 display: flex;
  justify-content: center;
  align-items: baseline; /* Change This Property*/
}

h1 {
  font-size: 22px;
  
}
h2 {
  font-size: 16px;
   
}

Answer 3

在CSS下方添加

h1,
h2{margin:0}

div {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

h1 {
  font-size: 22px;
  display: flex;
  align-items: baseline;
  vertical-align: baseline;
}

h2 {
  font-weight: 16px;
  display: flex;
  align-items: baseline;
  vertical-align: baseline;
}

h1,
h2{margin:0}

<div>
  <h1>H1</h1>
  <h2>H2</h2>
</div>

Answer 4

align-items是属于flex容器而不是flexed项的属性，有关快速参考，请参见https://css-tricks.com/snippets/css/a-guide-to-flexbox/；对于教程，请参见https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox。

此代码达到了预期的效果：

.container {
  display: flex;
  justify-content: center;
  align-items: baseline;
}

<div class="container">
  <h1>Bigger</h1>
  <h2>smaller<h2>
</div>

如何对齐不同的字体大小标题？

4 个答案: