如何在页面上使嵌入式单选按钮居中?

时间:2019-05-08 23:24:08

标签: vmware-clarity

我试图将一组嵌入式单选按钮放在我的网页上,但是似乎无法覆盖Claritys的CSS样式。

我尝试使用MEDIA-SET标签使用align-text:center,align-content:center,align-items:center将清晰度代码放在父DIV标签内。但是到目前为止,这些方法都没有起作用

<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 :(得分:0)

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

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

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