如何创建三行标签：中/上+下

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 居中。

我用Bootstrap4checkbox/label。我怎样才能做到这一点？

Answer 1

这可以使用 flex 来完成。将其添加到您的 css:

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

Answer 2

Flexbox 是解决此问题的比浮点数更现代的方法。它更灵活（请原谅双关语）。我还更改了复选框的位置。

.form-check {
  display: flex !important; /* defined as block by Bootstrap */
  flex-flow: row nowrap;
  align-items: center;
}
.m-0 {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.gp-left {
  margin: 0;
  padding-right: 1px;
}
.gp-right {
  flex: 1 1 auto;
}

.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 class="form-check user-select-none">
  <input
    type="checkbox"
    class="form-check-input"
    id="gp"
  />
  <label for="gp" class="form-check-label gp-label">
    <div class="m-0">
      <div class="gp-left">Lorem ipsum &</div>
      <div class="gp-right">
        <div class="gp-right-up">dolor</div>
        <div class="gp-right-down">amet</div>
      </div>
    </div>
  </label>
</div>

如何创建三行标签：中/上+下

How to create a three line label: middle/ up + down

html

css

css-position

bootstrap-4