With a normal screen size, it should look like this

<img id="pic_1" style="padding-right: 50px;" src="ссылка" /> <img id="pic_2" style="padding-left: 50px;" src="ссылка" />

When I compress the screen, it should look like this (according to the result when compressing, the pictures should be centered):

 @media screen and (max-width: 980px) { #pic_1{ display: table-cell; text-align: center; } #pic_2{ display: table-cell; text-align: center; } }

Does not work. Please help me figure out what I'm doing wrong.

    1 answer 1

    A little wrong centering. It is necessary to center the data inside the block. By applying text-align: center to the picture you are trying to text-align: center data inside the picture (?) In the center.

     .main { width: 100%; height: 100%; } @media screen and (max-width: 980px) { .main { text-align: center; } }

    Living example:

    http://codepen.io/bustexz/pen/QNgbOz