Как сделать чтобы картинка и текст были на одной линии?

Question

[sunnyrio]

Как сделать чтобы картинка и текст были на одной линии?

Сам код

<div class="col-md-2" style="display: inline-block;">
                            <img width="50px" height="48px" src="img/icon/icon_umbrella.png">
                            <p>Umbrella.</p>
                        </div>

Что должно получиться:

Answer 1

[Андрей Федоров]

Держите...
https://codepen.io/aliencash/pen/LOqgBj

Comments

[sunnyrio]

inline-block указываеться для конкретного элемента? Если это значение выставленно для контейнера на содержимое этого контейнера данное свойство не распространяеться?

[Андрей Федоров]

inline-block - для подписи.

Answer 2

[Виктор Таран]

Решение используя только бутстрап
https://itchief.ru/lessons/bootstrap-3/bootstrap-3...

Answer 3

[Анатолий]

Для этого существует свойство display: inline-block;
Указывается для элемента, в вашем случае можно для всех потомков.
Подробнее

Comments

[sunnyrio]

Только для элемента? Если в контейнере есть два элемента нужно указать для каждого элемента это свойств или можно указать для контейнера только?

[Анатолий]

sunnyrio, для каждого. Или указать для всех элементов (или определенных) в родителе:

# для всех потомков
.parent > * {
    display: inline-block;
}

# только для потомков, которые являются div
.parent > div {
    display: inline-block;
}

Answer 4

[shadobut]

display: flex - для контейнера