html - 无法将单选按钮对齐到中心(垂直)
问题描述
我创建了一个由两列组成的结构,第一列有三个单选按钮,我需要对齐到中心(垂直),第二列包含一些输入字段。
该结构具有以下配置:
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="mt-3 content-checkbox">
<div class="custom-control custom-radio">
<input type="radio" id="foo" name="test" checked class="custom-control-input">
<label class="custom-control-label" for="foo">Foo</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="foo1" name="test" class="custom-control-input">
<label class="custom-control-label" for="foo1">Foo</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="foo2" name="test" class="custom-control-input">
<label class="custom-control-label" for="foo2">Test</label>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="mt-3 text-center">
<div class="form-group">
<div class="form-group">
<label>Foo1</label>
<input type="text" class="form-control date" id="birthdatepicker" data-toggle="date-picker" data-single-date-picker="true">
</div>
<div class="form-group">
<label>Foo2</label>
<input type="text" class="form-control date" id="daterangetime" data-toggle="date-picker" data-time-picker="true" data-locale="{'format': 'DD/MM hh:mm A'}">
</div>
</div>
</div>
</div>
</div>
如您所见,结果是这样的:
如何将单选按钮垂直对齐到中心?
这是一个JSFIDDLE。
解决方案
您可以将以下类添加到列(带有单选按钮的类。)它会起作用:
d-flex align-items-center justify-content-center
您可以在此处找到有关这些类和更多弹性选项的更多信息。这样,您甚至可以找到更多可以进一步帮助您的自定义设置。
推荐阅读
- maven - 如何向发布添加目标:执行 maven-release-plugin 阶段
- joomla - Joomla 3 水平菜单
- unit-testing - 测试不起作用... MSTest.TestAdapter & MSTest.TestFramework 与 TFS 2015 SP3 不兼容?
- ms-word - ms-word : 导出为 pdf 为阴影段落提供白线
- html - 外部 CSS 样式表的问题
- c++ - libcurl 异步请求和连接重用
- reactjs - 将库 React 类组件转换为函数式组件
- python - 使用python获取谷歌驱动器文件夹中每个项目列表的简单方法
- mysql - 代码:1452。无法添加或更新子行:外键约束失败(`WW2`
- javascript - IIFE 中的常量变量的值在它之外被改变了吗?这怎么可能?