将复选框与第一句中间的标签对齐

Question

我想将具有特定样式的复选框与其右侧的标签对齐，这样多行标签就会对齐到复选框的中心。我无法修改 HTML，只能修改 CSS.

这是复选框：

<style>
  input[type='checkbox'] {
    color: rgb(64, 62, 63);
    display: block;
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    font-weight: 400;
    height: 19.1953px;
    letter-spacing: normal;
    line-height: 32px;
    margin-right: 8.8px;
    margin-top: -1.6px;
    overflow-x: visible;
    overflow-y: visible;
    vertical-align: middle;
    width: 19.1953px;
  }
  span {
    border-bottom-color: rgb(226, 232, 240);
    border-bottom-style: solid;
    border-bottom-width: 0px;
    border-left-color: rgb(226, 232, 240);
    border-left-style: solid;
    border-left-width: 0px;
    border-right-color: rgb(226, 232, 240);
    border-right-style: solid;
    border-right-width: 0px;
    border-top-color: rgb(226, 232, 240);
    border-top-style: solid;
    border-top-width: 0px;
    box-sizing: border-box;
    color: rgb(64, 62, 63);
    cursor: default;
    display: inline;
    font-size: 16px;
    height: auto;
    line-height: 32px;
    margin-left: 3px;
    position: static;
    text-size-adjust: 100%;
    width: auto;
  }
</style>
<div style="max-width:200px; margin-top: 20px">
    <label style="display: flex; align-items: baseline">
        <input type="checkbox"></input>
        <span>A long text A long text A long text A long text A long text A long text</span>
    </label>
</div>

结果是：

我要的是文字要和首句一致。 align-items: center 不起作用，因为虽然它完美对齐单行标签，但多行标签对齐在中心而不是第一行。

期望：

有办法做到这一点吗？

有关示例，请参阅 this CodePen。

Answer 1

您可以添加align-self: start;

因为您的标签元素有 flexBox 并且在 HTML 中有 align-items，您可以使用 align-self 覆盖 align-items 属性并移动元素的水平位置。

https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

input[type='checkbox'] {
  color: rgb(64, 62, 63);
  display: block;
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 0;
  font-weight: 400;
  height: 19.1953px;
  letter-spacing: normal;
  line-height: 32px;
  margin-right: 8.8px;
  margin-top: -1.6px;
  overflow-x: visible;
  overflow-y: visible;
  vertical-align: middle;
  width: 19.1953px;
  align-self: start;
}

编辑

你能试试这个吗？只玩margin-top: 1px;

您可能需要

.input{
  margin:0;
  padding:0;
}

.container{
  display:flex;
  flex-direction: column;
  justify-content: center;
  
}


  input[type='radio'] {
    color: rgb(64, 62, 63);
    display: block;
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    font-weight: 400;
    height: 19.1953px;
    letter-spacing: normal;
    line-height: 32px; 
    margin-right: 8.8px;
    margin-top: 1px; 
    overflow-x: visible;
    overflow-y: visible;
    width: 19.1953px;
    align-self: flex-start;
    height: 100%;
  }

<div class="container" style="max-width:200px; margin-top: 20px">
      <label style="display: flex; align-items: baseline">
          <input type="radio"></input>
          A long text A long text A long text A long text A long text A long text
          A long text A long text A long text A long text A long text A long text
      </label>

      <label style="display: flex; align-items: baseline">
        <input type="radio"></input>
        A long text 
      </label>
</div>

将复选框与第一句中间的标签对齐

Align checkbox with label in middle of first sentence

css

tailwind-css