Как вы вертикально центрируете радиокнопку внутри элемента div, который может расти или dimini sh? - PullRequest
Новая
       11

Как вы вертикально центрируете радиокнопку внутри элемента div, который может расти или dimini sh?

1 голос
/ 23 марта 2020

Я пытаюсь найти самый простой способ вертикального центрирования этой радиокнопки в 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.

1 Ответ

1 голос
/ 23 марта 2020

Вы можете достичь этого с помощью flexbox. Вам необходимо применить простую таблицу стилей к элементу ListOptions_ChoiceLine0.

HTML 

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

CSS

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

Обновлена ​​ссылка: https://jsfiddle.net/bvLyj0xe/1/

...