Ввод флажка не центрируется вместе с меткой

Question

text-center центрирует метку «отметьте этот пользовательский флажок», но вход остается слева.

Если вы удалите этот класс custom-control-input, вы увидите новый вход флажка, который будет отцентрировани вход начальной загрузки все еще будет слева, и его нельзя будет щелкнуть.

Я хочу центрировать все это.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <div class="custom-control custom-checkbox text-center">
      <input type="checkbox" class="custom-control-input" id="customCheck1">
      <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
    </div>

Answer 1

Используйте Bootstrap 4.1 или более новую версию, например, последнюю версию 4.2.1.custom-control-label был изменен с Bootstrap 4.1, чтобы быть position:relative, что позволит центрировать и флажок и метку.

Демо

Answer 2

Вы можете попробовать этот код,

, просто скажите вашему текущему div 'd-inline-block' это класс начальной загрузки, оберните класс контейнера и добавьте текст-центр

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container text-center">
    <div class="custom-control d-inline-block custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="customCheck1">
      <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
    </div>
</div>

Answer 3

Попробуйте эту разметку:

<label class="custom-control-label" for="customCheck1"><input type="checkbox" class="custom-control-input" id="customCheck1" />Check this custom checkbox</label>