我有一个标签标题和一个图标,我试图使用flex垂直和水平居中。标签工作正常;唯一的问题是图标。
我希望图标位于标签标题上方而不是旁边。我尝试使用<br>
,但它仍然无效。
下面的代码段和JSFiddle link:
.radio input[type="radio"] + label {
align-items: center;
background-color: white;
border: 1px solid #cccbc8;
display: flex;
height: 150px;
justify-content: center;
position: relative;
width: 150px;
}
&#13;
<div class="radio-inline radio input_type">
<input id="Best offers" name="54_answer" type="radio" next-question-id="" value="Best offers">
<label for="Best offers">Best offers <br> <i class="fa fa-star-o"></i></label>
</div>
&#13;
答案 0 :(得分:0)
是的,所以使用display: flex
您的元素将以内联方式显示。 flex有一个选项可以指定我们是要在行中还是以列样式显示元素(默认情况下是行)。在您的情况下,您希望按列,这就是为什么将此添加到您的类
flex-direction: column-reverse
这会将您的图标放在文字上方。
答案 1 :(得分:0)
CSS规则中的选择器完全错误,flex-direction
必须为column
。请尝试如下:
.radio-inline.radio.input_type {
align-items: center;
background-color: white;
border: 1px solid #cccbc8;
display: flex;
flex-direction: column;
height: 150px;
justify-content: center;
position: relative;
width: 150px;
}
.radio-inline label {
margin-top: 10px;
}
&#13;
<div class="radio-inline radio input_type">
<input id="Best offers" name="54_answer" type="radio" next-question-id="" value="Best offers">
<label for="Best offers">Best offers <br> <i class="fa fa-star-o"></i></label>
</div>
&#13;