2017-03-02 61 views
-1

我有一個標籤標題和一個圖標,我嘗試使用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; 
 
}
<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>

+0

我不明白你想要什麼。是[this](http://i.imgur.com/UTiuoE4.png)你得到了什麼?它在哪裏定位? – user7393973

+0

同樣在這裏font-awesome圖標丟失 – Toxide82

+0

嘗試在span元素中添加圖標看看那是什麼 – Toxide82

回答

0

呀,所以通過使用display: flex你的元素將被內嵌顯示。沒有爲柔性指定,如果我們要顯示我們的行或列中的風格元素(默認爲行)的選項。在你的情況,你想這就是爲什麼添加到您的類

flex-direction: column-reverse 

這將會把上面的文字你的圖標列。

+0

「inline」的含義與「完全不同」你在這裏暗示 - 你在談論水平對齊。 – Johannes

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

相關問題