Как создать определенное расстояние между горизонтальными блоками div и чтобы при этом они были посередине и центральный блок не сдвигался?

Question

[Lex Fox]

Добрый вечер.
Как создать определенное расстояние между горизонтальными блоками div и чтобы при этом они были посередине и центральный блок не сдвигался?
То есть у меня есть три div и они должны быть горизонтально и при этом центральный div должен быть в центре а боковые равномерно по боком на определенном и одинаковом расстоянии.

<div class="booksrating">
      <div class="bookOne">         
          <div class="pic1"><img src="img/bestbook_One.png"></div>
          <div class="text1"><p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Duis ultricies pretium nibh, at faucibus justo euismod sed. In gravida lacus nunc, et faucibus quam venenatis et. </p></div>
          <div class="button1"><a href="#"><img src="img/button.png"></a></div>
      </div>

      <div class="bookTwo">
          <div class="pic2"><img src="img/bestbook_Two.png"></div>
          <div class="text2"><p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Duis ultricies pretium nibh, at faucibus justo euismod sed. In gravida lacus nunc, et faucibus quam venenatis et. </p></div>
          <div class="button2"><a href="#"><img src="img/button.png"></a></div>
      </div>

      <div class="bookThree">
          <div class="pic3"><img src="img/bestbook_Three.png"></div>
          <div class="text3"><p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Duis ultricies pretium nibh, at faucibus justo euismod sed. In gravida lacus nunc, et faucibus quam venenatis et. </p></div>
          <div class="button3"><a href="#"><img src="img/button.png"></a></div>
      </div>   
    </div>

.bookOne {
	display: table;
	width: 10px;
	text-align: center;

}
.bookTwo {
	display: table;
	width: 10px;
	text-align: center;
}
.bookThree {
	display: table;
	width: 10px;
	text-align: center;
}

То есть должно быть как на картинке


Просто когда я начинаю двигать боковые элементы, центральный начинает съезжать либо влево либо вправо.
Помогите пожалуйста. Заранее спасибо!

Answer 1

[Алексей]

1. Не давайте разные названия css классов для совершенно одинаковых элементов.
2. Забудьте про display: table и никогда его больше не используйте.

Такие вещи просто делаются на flexbox, если сомневаетесь в поддержке - https://caniuse.com/#search=Flexible%20Box

Вот как простой пример реализации, с паддингами и шириной самого контейнера сами подберете расстояние, какое вам нужно. Также, при уменьшении экрана элементы будут переноситься, что плюс для мобилки.