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

Question

[VersAdam]

Как закрепить картинки в ряд и по центру ?
-------------------------------------------------------
HTML :
link rel="stylesheet" href="input.css"

p style=pic
img src="file:///C:/Users/Admin/Downloads/hiclipart.com.png"
img src="file:///C:/Users/Admin/Downloads/hiclipart.com.png"
/p
-------------------------------------------------------
- CSS :
img {
width: 100px;
display: inline-block;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
-------------------------------------------------------
Если display:inline-block то картинки располагаются слева экрана и в ряд, рядом друг с другом.

Если display:block то картинки располагаются по центру экрана, но в столбик.


Как сделать так что б картинки отображались по центру экрана и в ряд ?
Спасибо большое.

Comments

[Gary_Ihar]

Посмотрите в сторону flex, например

[Ankhena]

Просто text-align: center родителю
https://jsfiddle.net/rwjfzay7/

Answer 1

[Ваня Гурьянов]

Попробуйте убрать display:inline-block, и добавьте text-align: center тегу родителя.
Либо просто добавить тегу родителя margin: 0 auto;

Comments

[Ankhena]

Либо просто добавить тегу родителя margin: 0 auto;

Не поможет, у родителя ширина не задана.