单独行中的图标字体和标签文本

-1

我有一个标签标题和一个图标，我尝试使用flex垂直和水平居中。标签工作正常;唯一的问题是图标。单独行中的图标字体和标签文本

我想要的图标是上面的标签标题，而不是在它旁边。我试着用<br>，但它仍然无法正常工作。下面

.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; 
 
}

<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>

来源

2017-03-02 Pedro

我不明白你想要什么。是[this]（http://i.imgur.com/UTiuoE4.png）你得到了什么？它在哪里定位？ – user7393973

同样在这里font-awesome图标丢失 – Toxide82

尝试在span元素中添加图标看看那是什么 – Toxide82

呀，所以通过使用display: flex你的元素将被内嵌显示。没有为柔性指定，如果我们要显示我们的行或列中的风格元素（默认为行）的选项。在你的情况，你想这就是为什么添加到您的类

flex-direction: column-reverse

这将会把上面的文字你的图标列。

来源

2017-03-02 20:19:38 Nicholas

“inline”的含义与“完全不同”你在这里暗示 - 你在谈论水平对齐。 – Johannes

您的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; 
 
}

<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>

来源

2017-03-02 20:58:24 Johannes

单独行中的图标字体和标签文本

回答

相关问题