你如何在一个可以增加或减少的 div 中垂直居中一个单选按钮？答案

【问题标题】：How do you vertically center a radio button within a div that can grow or diminish?你如何在一个可以增加或减少的 div 中垂直居中一个单选按钮？
【发布时间】：2020-03-24 03:12:44
【问题描述】：

我正在尝试找出最简单的方法，让这个单选按钮在 div 中垂直居中，如果可能的话，无需编辑 HTML。

当前，如果存在图像，单选按钮位于左上角。通过向图像添加“垂直对齐：中间”，文本垂直对齐到中间。如何使用单选按钮执行此操作？

我正在使用一个 JSFiddle 示例。

https://jsfiddle.net/blobula/hex4botk/3/

HTML

<div class="clearfix" id="ListOptions_ChoiceLine0" iscorrect="">
                <div class="marginRight5 marginBottom5 clsSectionContent pull-left marginLeft10 width20">
                    <i class="fa fa-check ng-hide" ng-show="((IsReview &amp;&amp; drAnswer.DataColumnIsCorrect) || (FeedbackClicked &amp;&amp; UserAnswer.length > 0 &amp;&amp; drAnswer.DataColumnIsCorrect &amp;&amp; drAnswer.DataColumnIsSelected))" aria-label="Correct Answer"></i>
                    <i class="fa fa-close ng-hide" ng-show="(IsReview || FeedbackClicked) &amp;&amp; UserAnswer.length > 0 &amp;&amp; !drAnswer.DataColumnIsCorrect &amp;&amp; drAnswer.DataColumnIsSelected" aria-label="Incorrect Answer"></i>
                </div>
                <div class="marginRight10 marginBottom5 clsSectionContent pull-left"><input type="radio" id="Option0" ng-checked="drAnswer.DataColumnIsSelected" ng-disabled="!AssessmentMode" ng-click="ListOptions_RadioBtnClick(this)" name="ListOptionsRadioBtns" value="1"></div>
                <div class="clsSectionContent pull-left width90">
                    <label for="Option0" ng-bind-html="BindHTML(drAnswer.DataColumnAnswerText)" ng-class="{'fontNormal':!(Mode == PlayerModes.PreviewWithFeedback || IsReview || FeedbackClicked)}" class="ng-binding fontNormal"><img src="https://i.pinimg.com/originals/3c/d7/d9/3cd7d9e37b06574cc51264475ca9c26a.png" alt="ironman" height="" width="100">Ironman</label>

                </div>
            </div>

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}
img {
    vertical-align: middle;
}
.width20 {
    width: 20px;
}
.marginBottom5 {
    margin-bottom: 5px;
}
.marginRight5 {
    margin-right: 5px;
}
.clsSectionContent {
    margin-top: 10px;
}
.marginLeft10 {
    margin-left: 10px;
}
.pull-left {
    float: left!important;
}
input[type="radio"], input[type="checkbox"] {
    display: inline-block;
}

input[type=checkbox], input[type=radio] {
    margin: 4px 0 0;
    margin-top: 1px\9;
    line-height: normal;
}
input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0;
}
.width90 {
    width: 90%;
}

.fontNormal {
    font-weight: normal;
}


Any help would be appreciated.

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

您可以通过使用 flexbox 来实现这一点。您需要在 ListOptions_ChoiceLine0 元素上应用一个简单的样式表。

HTML

<div class="clearfix verticallyCenter" id="ListOptions_ChoiceLine0" iscorrect="">

CSS

.verticallyCenter {
 display: flex;
 align-items: center;
}

更新链接：https://jsfiddle.net/bvLyj0xe/1/

【讨论】：