центральный флажок внутри метки с несколькими строками текста

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>

Это мой кодовый код, что я сделал: https://codepen.io/infed/pen/BqaMWm

Моя цель: у нас есть такое количество текста, и мне нужен центрэтот значок.

Answer 1

Один из вариантов - использовать CSS Grid:

*,
 ::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 .

Или 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 .

Ссылки:

• " CSSГибкая схема размещения (MDN).
• " CSS Grid Layout " (MDN).

Answer 2

Flexbox может сделать это.

label {
  display: flex;
  align-items: center;
}

span {
  margin-right: 1em;
}

<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>
        savivaldybės įmonės, akcinės bendrovės, uždarosios akcinės bendrovės, kurių akcijos ar dalis akcijų, suteikiančių daugiau kaip 1/2 visų balsų šių bendrovių visuotiniame akcininkų susirinkime, priklauso savivaldybei nuosavybės teise ir kurios laikomos didelėmis įmonėmis pagal Lietuvos Respublikos įmonių finansinės atskaitomybės įstatymą, valdymo ar priežiūros organo narys
    </label>