HTML-метка центра в плавающем div

Question

У меня есть набор плавающих div. У меня есть ярлык в некоторых из этих div. Я хотел бы, чтобы метки были вертикально центрированы. Я попробовал различные варианты, предложенные в вопросах переполнения стека. Однако ни один из них не помог мне до сих пор. Могу ли я запросить помощь, чтобы получить эту сортировку, пожалуйста?

Вот пример:

<div class="lv_props"> 
    <div style="float: left" class="float_d"> 
     <label>hello 1</label> 
    </div> 
    <div style="float: left" class="float_d"> 
     <label>hello 2</label> 
    </div> 
    <div style="float: left" class="float_d"> 
     <label>hello 3</label> 
    </div> 
</div> 

label{ 
    display: inline; 
} 

.float_div { 
    margin-left: 3%; 
    text-align: center; 
    vertical-align: middle; 
} 

.lv_props { 
    padding-left:4%; 
    text-align: center; 
    vertical-align: middle; 
} 

Answer 1

Вы запрашиваете вертикальное выравнивание, vertical-align: middle; не работает так, как вы ожидаете. Простое решение - установить line-height на то же значение, что и на height. Это работает только в том случае, если ваши метки имеют одну строку, как в вашем примере. Если ваши ярлыки имеют более длинный текст и диапазон более одной строки, пожалуйста, укажите лучший пример, чтобы мы могли вам помочь

В вашем примере все ярлыки и их контейнер имеют одинаковую высоту, поэтому трудно продемонстрировать эффект вертикального выравнивания. По этой причине я установил высоту 100 пикселей на контейнеры, поэтому решение должно установить line-height на 100 пикселей. Я добавил границы только для иллюстрации.

label{ 
 
    display: inline; 
 
    border: 1px solid black; 
 
} 
 

 
.float_d { 
 
    float: left; 
 
    margin-left: 3%; 
 
    text-align: center; 
 
    width: 100px; 
 
    height: 100px; 
 
    line-height: 100px; 
 
    border: 1px solid red; 
 
} 
 

 
.lv_props { 
 
    padding-left:4%; 
 
}

<div class="lv_props"> 
 
    <div class="float_d"> 
 
    <label>hello 1</label> 
 
    </div> 
 
    <div class="float_d"> 
 
    <label>hello 2</label> 
 
    </div> 
 
    <div class="float_d"> 
 
    <label>hello 3</label> 
 
    </div> 
 
</div>

Answer 2

Все, что я должен был сделать, чтобы код был поставлен float_d класс фиксированной ширины. Центрированный текст нуждается в фиксированной ширины контейнера:

Просто добавьте:

width: 30%; 

к вашему .float_d класса.

См. working example здесь, на JSFiddle.net.

Answer 3

Обновить список ниже.

.lv_props { 
    padding-left:4%; 
    display: table; 
    margin: 0 auto; 
} 

Вот Demo.