Question

当您有多行文本时，如何在CSS中将复选框居中？当我收到少量文字时，一切都对我有用。但是，当我2或3行文字无法正常工作时。无法理解这里出了什么问题...

<label class="checkbox-input--label" for="check_politika_pats-h">
    <span class="checkbox-input--checkbox"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" class=""><path d="M5.19 9.91a.93.93 0 0 1-.61-.23L.25 5.69a.76.76 0 0 1 0-1.12.9.9 0 0 1 1.21 0l3.73 3.44 7.35-6.78a.9.9 0 0 1 1.21 0c.33.32.33.81 0 1.12L5.79 9.68a.88.88 0 0 1-.6.23z"></path></svg></span>
    Donec pharetra condimentum tincidunt. Donec sed imperdiet metus. Nullam dapibus augue ex. Quisque dignissim tempor justo, sit amet mattis tellus tempus in. Praesent ut mi maximus, hendrerit leo in, semper sem. Morbi et ligula a felis fermentum ornare sit amet et urna. Curabitur elementum arcu et convallis vestibulum. Nullam molestie urna quis tellus imperdiet, vitae mattis turpis vulputate. Pellentesque sagittis convallis neque eu lacinia. Aenean ac arcu et orci ornare luctus in eu libero. Curabitur rutrum urna sed elementum gravida. Quisque justo felis, mollis sed iaculis quis, feugiat sed odio. Integer ornare risus sed nulla volutpat consequat. Aenean diam dui, suscipit vel leo eget, ullamcorper porttitor erat.
</label>

这是我做的Codepen代码： https://codepen.io/infed/pen/BqaMWm

我的目标是：我们有那么多的文字，我需要在此图标的中心放置。

Answer 1

Flexbox可以做到这一点。

push

label {
  display: flex;
  align-items: center;
}

span {
  margin-right: 1em;
}

Answer 2

一种选择是使用CSS网格：

*,
 ::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

label {
  /* Using grid-layout: */
  display: grid;
  
  /* defining the columns into which the
     content should be placed; '30px' defines a column
     of that size, '1fr' is one fractional unit of the
     remaining space: */
  grid-template-columns: 30px 1fr;
  /* aligning items on the center of the flow direction: */
  align-items: center;
  
  /* irrelevant */
  margin: 0.5em 1em;
  border: 1px solid #999;
  padding: 0.4em;
}

<label class="checkbox-input--label" for="check_politika_pats-h">
    <span class="checkbox-input--checkbox"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" class=""><path d="M5.19 9.91a.93.93 0 0 1-.61-.23L.25 5.69a.76.76 0 0 1 0-1.12.9.9 0 0 1 1.21 0l3.73 3.44 7.35-6.78a.9.9 0 0 1 1.21 0c.33.32.33.81 0 1.12L5.79 9.68a.88.88 0 0 1-.6.23z"></path></svg></span>
    Donec pharetra condimentum tincidunt. Donec sed imperdiet metus. Nullam dapibus augue ex. Quisque dignissim tempor justo, sit amet mattis tellus tempus in. Praesent ut mi maximus, hendrerit leo in, semper sem. Morbi et ligula a felis fermentum ornare sit amet et urna. Curabitur elementum arcu et convallis vestibulum. Nullam molestie urna quis tellus imperdiet, vitae mattis turpis vulputate. Pellentesque sagittis convallis neque eu lacinia. Aenean ac arcu et orci ornare luctus in eu libero. Curabitur rutrum urna sed elementum gravida. Quisque justo felis, mollis sed iaculis quis, feugiat sed odio. Integer ornare risus sed nulla volutpat consequat. Aenean diam dui, suscipit vel leo eget, ullamcorper porttitor erat.
</label>
<label class="checkbox-input--label" for="check_politika_pats-h">
    <span class="checkbox-input--checkbox"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" class=""><path d="M5.19 9.91a.93.93 0 0 1-.61-.23L.25 5.69a.76.76 0 0 1 0-1.12.9.9 0 0 1 1.21 0l3.73 3.44 7.35-6.78a.9.9 0 0 1 1.21 0c.33.32.33.81 0 1.12L5.79 9.68a.88.88 0 0 1-.6.23z"></path></svg></span>
    Donec
</label>

JS Fiddle demo。

或CSS Flexbox：

*,
 ::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

label {
  /* using the flex layout: */
  display: flex;
  /* justifying the content of the <label> at the start: */
  justify-content: start;
  /* aligning items perpendicular to the flow-axis; in this
     instance the content is flowing horizontally (by
     default), so here we vertically align the items
     across the center of the containing element: */
  align-items: center;
  margin: 0.5em 1em;
}

label>span.checkbox-input--checkbox {
  /* defining a space between the <span> and the following
     sibling(s)/content: */
  margin: 0 0.5em 0 0;
}

<label class="checkbox-input--label" for="check_politika_pats-h">
    <span class="checkbox-input--checkbox"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" class=""><path d="M5.19 9.91a.93.93 0 0 1-.61-.23L.25 5.69a.76.76 0 0 1 0-1.12.9.9 0 0 1 1.21 0l3.73 3.44 7.35-6.78a.9.9 0 0 1 1.21 0c.33.32.33.81 0 1.12L5.79 9.68a.88.88 0 0 1-.6.23z"></path></svg></span>
    Donec pharetra condimentum tincidunt. Donec sed imperdiet metus. Nullam dapibus augue ex. Quisque dignissim tempor justo, sit amet mattis tellus tempus in. Praesent ut mi maximus, hendrerit leo in, semper sem. Morbi et ligula a felis fermentum ornare sit amet et urna. Curabitur elementum arcu et convallis vestibulum. Nullam molestie urna quis tellus imperdiet, vitae mattis turpis vulputate. Pellentesque sagittis convallis neque eu lacinia. Aenean ac arcu et orci ornare luctus in eu libero. Curabitur rutrum urna sed elementum gravida. Quisque justo felis, mollis sed iaculis quis, feugiat sed odio. Integer ornare risus sed nulla volutpat consequat. Aenean diam dui, suscipit vel leo eget, ullamcorper porttitor erat.
</label>
<label class="checkbox-input--label" for="check_politika_pats-h">
    <span class="checkbox-input--checkbox"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" class=""><path d="M5.19 9.91a.93.93 0 0 1-.61-.23L.25 5.69a.76.76 0 0 1 0-1.12.9.9 0 0 1 1.21 0l3.73 3.44 7.35-6.78a.9.9 0 0 1 1.21 0c.33.32.33.81 0 1.12L5.79 9.68a.88.88 0 0 1-.6.23z"></path></svg></span>
    Donec
</label>

JS Fiddle demo。

参考文献：

” CSS Flexible Box Layout（MDN）。
“ CSS Grid Layout”（MDN）。

带有多行文本的标签内的中心复选框

2 个答案: