Угловой Материал: мат-флажок вертикальное выравнивание флажка

Question

Я не могу переопределить значения по умолчанию, чтобы выровнять флажок по вертикали относительно метки флажка.Искал некоторое время но ничего не получалось.Смотрите пример изображения:

Должно быть как:

Пробовал следующее:

.mat-checkbox-inner-container {
    margin: none;
}

HTML:

<label><b>Home Type</b></label>
    <mat-checkbox>Entire place<br><small class="text-muted">Have a place to yourself</small></mat-checkbox>
    <mat-checkbox>Private room<br><small class="text-muted">Have your own room and share some common spaces</small></mat-checkbox>
    <mat-checkbox>Shared room<br><small class="text-muted">Stay in a shared space, like a common room</small></mat-checkbox>

Answer 1

Просто столкнитесь с той же проблемой.Чтобы решить эту проблему, я использовал следующее (к сожалению, нужно страшно! Важно):

.mat-checkbox-inner-container {
  margin: 2px 8px auto 0 !important;
}

Я обнаружил, что мне пришлось отрегулировать верхнее поле (в данном случае 2 пикселя), чтобы макет рядом с надписью выглядел правильно.

Answer 2

Аналогично ответу Крейга, но как потомок .mat-checkbox.mat-accent, чтобы избавить от необходимости использовать "! Important"

.mat-checkbox.mat-accent .mat-checkbox-inner-container {
    margin: 2px 8px auto 0;
}

или использовать sass / less

.mat-checkbox.mat-accent {
   .mat-checkbox-inner-container {
      margin: 2px 8px auto 0;
   }
}

Answer 3

Существует быстрое решение, которое не относится к ng-материалу

. Вы можете поместить свой "флажок" в элемент "li" и выровнять свой "ul", установив количество столбцов, как это:

<ul style="columns:2">
    <li>
        <mat-checkbox>Entire place<br><small class="text-muted">Have a place to yourself</small></mat-checkbox>
    </li>
    <li>
        <mat-checkbox>Private room<br><small class="text-muted">Have your own room and share some common spaces</small></mat-checkbox>
    </li>
    <li>
        <mat-checkbox>Shared room<br><small class="text-muted">Stay in a shared space, like a common room</small></mat-checkbox>
    </li>
</ul>