單獨行中的圖標字體和標籤文本

-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

單獨行中的圖標字體和標籤文本

回答

相關問題