如何在页面上居中内嵌单选按钮？答案

【问题标题】：How do I center inline radiobuttons on the page?如何在页面上居中内嵌单选按钮？
【发布时间】：2019-05-08 23:24:08
【问题描述】：

我正在尝试将一组内联单选按钮放在我的网页上，但似乎无法覆盖 Claritys 的 CSS 样式。

我尝试使用 align-text:center、align-content:center、align-items:center 将清晰度代码放置在父 DIV 标记中，使用 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>

单选按钮应在页面中居中。

【问题讨论】：

标签： vmware-clarity

【解决方案1】：

一种方法是将您自己的 css 类添加到 clr-control-container 并为其 css 设置以下内容：

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

这是一个带有居中内联单选按钮的堆栈闪电：https://stackblitz.com/edit/so-56050259-center-inline-radio-buttons

【讨论】：