Центрирование элементов в div над элементами в другом div

Я пытаюсь разместить строку из 6 символов выше 6 значков, чтобы первый текст появлялся над первым значком, вторым текстом над вторым значком и т. Д. t разместите изображение, потому что я здесь новый.Центрирование элементов в div над элементами в другом div

Вот HTML:

<div id="forecast"> 
    <!-- Naming convention starts with today as Sunday, because reasons --> 
    <div id="names" class="row"> 
    <div id="mon" class="col-md-2"> Mon </div> 
    <div id="tues" class="col-md-2"> Tues </div> 
    <div id="wed" class="col-md-2"> Wed </div> 
    <div id="thur" class="col-md-2"> Thur </div> 
    <div id="fri" class="col-md-2"> Fri </div> 
    <div id="sat" class="col-md-2"> Sat </div> 
    </div> 
    <!-- End of names --> 

    <div id="forecast-icons" class="row"> 
    <div id="mon-icon" class="col-md-2"> </div> 
    <div id="tues-icon" class="col-md-2"> </div> 
    <div id="wed-icon" class="col-md-2"> </div> 
    <div id="thur-icon" class="col-md-2"> </div> 
    <div id="fri-icon" class="col-md-2"> </div> 
    <div id="sat-icon" class="col-md-2"> </div> 

    </div> 
    <!-- forecast icons -->

Бутстраповское не влияет на значки, и я не знаю, почему. Чтобы противодействовать этому, я попытался добавить padding-left: как в процентах, так и в сырых числах, но это не сработало. Я мог бы делать необработанные числа, но для этого требовалось бы количество точек останова STUPID.

Я также пробовал: #names, # forecast-icons {display: flex; flex-direction: row; justify-content: center; }

Но все иконки были сгруппированы по центру.

Вот ссылка на codepen (я знаю, что люди здесь, как jsfiddle, извините): https://codepen.io/CrumrineCoder/pen/EyLmoZ?editors=1100

А вот полный вид страницы:

https://codepen.io/CrumrineCoder/pen/EyLmoZ?editors=1100

Я их всех в линию применение дисплея: встроенный для всех из них.

источник

2016-07-24 CrumrineCoder

Вот ссылка на изображение того, что я пытаюсь спросить: http://i.imgur.com/tX7Tf4c.png – CrumrineCoder

ли проблема, что иконы не являются в центре? Столбцы начальной загрузки работают. – Toby

Вы используете 'col-md- *', который будет применяться только на экранах с шириной более 992 пикселей. Не уверен, знаете ли вы об этом. – Toby

вы могли бы попытаться положить ваши имена прогноза и значки в таблице это должно сделать их выровнять несколько должным образом друг под другом вы можете добавить классы или идентификаторы для строк таблицы центрировать текст и иконку более approperiatly

<table> 
    <tr bgcolor="#FF0000"> 
    <th>Mon</th> 
    <th>T</th> 
    </tr> 
    <tr> 
    <td>icon</td> 
    <td>icon</td> 
    </tr> 
</table>

источник

2016-07-24 12:20:37 user1443063

https://codepen.io/CrumrineCoder/pen/grzWqr?editors=1100 Я пробовал это, но он, похоже, не работал. Я делаю это неправильно? Извините, я сравнительно новичок в веб-разработчике, и я не слишком разбирался в позиционировании. – CrumrineCoder

Хорошо, так что после некоторого времени работы я исправил его ... sorta. Они все выровнены, но на самом деле не слишком много, но это работает, я думаю. Вот соответствующий CSS:

#names > div { 
display: inline; 
font-size: 20px; 
} 
#names{ 
    text-align: center; 
} 
#forecast-icons > div { 
    font-size: 30px; 

} 
#forecast-icons{ 
    text-align: center; 
    display: block; 
    width: 100%; 
}

источник

2016-07-24 14:16:10 CrumrineCoder

Центрирование элементов в div над элементами в другом div

ответ

Смежные вопросы