我正在尝试将一组内联radiobuttons集中在我的网页上,但似乎无法覆盖Claritys的CSS样式。
我尝试使用Align-Text:中心,对齐 - 包容器:中心,Align-Items:中心,使用fieldSet标签,将清晰代码放置在父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>
radiobuttons应该以页面为中心。
一种方法是将自己的CSS类添加到clr-control-container
并为其CSS设置以下内容:
.app-centered-radios {
width: 100%;
justify-content: center;
}
这是一个带有内联收音机按钮的stackblitz:https://stackblitz.com/edit/so-56050259-center-inline-inline-radio-buttons