Как центрировать встроенные радиокнопки на странице? - PullRequest
Новая
       21

Как центрировать встроенные радиокнопки на странице?

0 голосов
/ 09 мая 2019

Я пытаюсь центрировать группу встроенных радиокнопок на моей веб-странице, но, похоже, не могу переопределить CSS-стиль Claritys.

Я попытался поместить код ясности в родительский тег DIV с помощью функции align.-text: center, align-content: center, align-items: center, используя тег FIELDSET.Но пока ничего из этого не сработало 

<fieldset style='text-align: center'>
    <div class="clr-form-control">
        <div class="clr-control-container clr-control-inline">
          <div class="clr-radio-wrapper">
            <input type="radio" id="vertical-radio1" name="radio-full" value="option1" class="clr-radio">
            <label for="vertical-radio1" class="clr-control-label">option 1</label>
          </div>
          <div class="clr-radio-wrapper">
            <input type="radio" id="vertical-radio2" name="radio-full" value="option2" class="clr-radio">
            <label for="vertical-radio2" class="clr-control-label">option 2</label>
          </div>
          <div class="clr-radio-wrapper">
            <input type="radio" id="vertical-radio3" name="radio-full" value="option3" class="clr-radio">
            <label for="vertical-radio3" class="clr-control-label">option 3</label>
          </div>

        </div>
    </div>
</fieldset>

Радиокнопки должны быть центрированы на странице.

1 Ответ

0 голосов
/ 10 мая 2019

Один из подходов заключается в добавлении вашего собственного класса css к clr-control-container и установке следующего значения для его css: 

.app-centered-radios {
  width: 100%;
  justify-content: center;
}

Вот блик стека с центрированными встроенными переключателями: https://stackblitz.com/edit/so-56050259-center-inline-radio-buttons

...