时间戳

首页 > 解决方案 > 对齐两个元素的基线

html - 对齐两个元素的基线

问题描述

我有以下 HTML 和 CSS：

h1 {
  display: inline-block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div style="width:500px">
  <h1>My Title</h1>
  <span class="float-right">Text on the right border</span>
</div>

如果您知道我的意思，我不想做“像素圈地”并将行高调整为 17.533 像素。

标签： htmlcss

解决方案

你可以像这样使用 Flexbox :)

更多关于 Flexbox 的阅读 -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/

h1 {
  display: inline-block;
}
div {
  display:flex;
  justify-content:center;
  align-items:center;
  justify-content: space-between
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div style="width:500px">
  <h1>My Title</h1>
  <span class="float-right">Text on the right border</span>
</div>

推荐阅读