Как выровнять картинку внутри по центру?

Question

[N-I]

Картинки разного размера. Меньше блока.

<ul class="list-inline">
	<li><img src="img/1.png"></li>
	<li><img src="img/2.png"></li>
<li><img src="img/3.png"></li>
</ul>

li {
display: bloсk;
height: 100px;
width: auto;
vertical-align: bottom;
}

img {

}



Спасибо.

Answer 1

[Ankhena]

Решение с флексами для картинок разного размера: codepen.io/anon/pen/RRQWpQ

Варианты:
по горизонтали:
1. text-align:center для li
2.

img {
display:block;
margin: auto;
}

3. flex

По вертикали:
1. либо через display table
2. через absolute и relative и нолики по всем сторонам и margin
3. проще всего через flex'ы

P.S.
1. Инлайн-блок правильно пишется вот так: display: inline-block;
2. Есть классные теги для окружения картинки: figure и figcaption

Comments

[N-I]

По вертикали не получается.

[Ankhena]

N-I: я пример сверху прикрепила уже, там все получено :)

[N-I]

Ankhena: Да, картинка в центре. Но блоки теперь в линию. Как поправить. Это Bootstrap. https://s.mail.ru/ANHX/ePkCGvrHZ

[N-I]

Спасибо. Это блок. display: blok; Не туда было приписано, я не заметила. Может этим ещё и запутала.

[N-I]

Получилось с line-height и text-align:center. Спасибо.

Answer 2

[gleendo]

https://jsfiddle.net/mLwcwgxg/2/

Comments

[N-I]

Не получается. Они выстраиваются по вертикали.

[gleendo]

N-I: Что не получается:? Картинки любого размера, четко выстроены в центре блоков.

[N-I]

evg_: https://s.mail.ru/9bRY/f4A6Xgjpw Нужно расположение, как на картинке в вопросе.

Answer 3

[Pavel K]

Можно через display: table-cell; либо Flexbox

Comments

[N-I]

А поподробнее, если можно. Через display: table-cell высота становится равная картинке, а нужно, чтобы высота была одинаковая, а картинки внутри разных размеров.

[Pavel K]

N-I: либо так: https://jsfiddle.net/4b5wjcaz/ либо, если известно, что высота блока будет жёстко задана, то https://jsfiddle.net/L17mpLnm/

[N-I]

Pavel K: Вот, что получается https://cloud.mail.ru/public/Fke2/UqCNAP2MR
Вот, что нужно https://cloud.mail.ru/public/9zDe/Fi8LsaaAv

[N-I]

Pavel K: Да, второй вариант + text-align: center для li. Всё получилось, спасибо.

Answer 4

[iBird Rose]

врапперу дать before

.img-wrap:before {
	content: "";
	display: inline-block;
	width: 1px;
	height:  100px; //задать height самого враппера
	margin-left: -1px;
	vertical-align: middle;
}

а картинке display:inline-block и vertical-align: middle;