html - 如何创建三行标签：middle/up + down

Question

我有以下标签：

我怎样才能使'Lorem ipsum'恰好位于两个'dolor'和'amet'的中间？

- 粗略的图片

我试过了：

.gp-label {
  vertical-align: middle;
  width: 100%;
}
.gp-left {
  margin: 0;
  padding-right: 1px;
  float: left;
  display: table-cell;
  vertical-align: middle;
}

.gp-right {
  float: left;
}

.gp-right,
.gp-right-up,
.gp-right-down {
  margin: 0;
  padding: 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div className="form-check user-select-none">
  <input
    type="checkbox"
    className="form-check-input"
    id="gp"
  />
  <label htmlFor="gp" className="form-check-label gp-label">
    <div className="m-0">
      <div className="gp-left">Lorem ipsum &</div>
      <div className="gp-right">
        <div className="gp-right-up">dolor</div>
        <div className="gp-right-down">amet</div>
      </div>
    </div>
  </label>
</div>

但这会导致：

我不能强迫第一个 div 居中。

我使用 Bootstrap 4 复选框/标签。我怎样才能做到这一点？

标签： htmlcssbootstrap-4css-position

Answer 1

这可以使用flex. 将其添加到您的 CSS：

.form-check-label.gp-label .m-0 {
  display: flex;
  align-items: center;
}