Выравнивание нескольких изображений в одной строке по центру на всех страницах. (?)

Рейтинг: 1Ответов: 1Опубликовано: 22.04.2015

Есть сайт с 10к+ страниц. Ширина блока с контентом 641. Практически на всех страницах используется изображения с шириной 640, либо два с шириной 320. У изображений других размеров принудительно установлено Width="640" и "320" соответственно. Абзацы и изображения не в <р>. Отступы между абзацами заданы br.

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

С теми изображениям, чья ширина 640 проблем не возникнет, им можно прописать display: block; margin: 0 auto; , но что делать с теми, что стоят рядом и имеют ширину 320? Возможно ли такие "пары" выровнять по центру?

Столкнулся с проблемой.

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Я бы решил эту проблему с помощью Jquery, если у вас больше не к чему привязаться, кроме изображений.

Сначала ищем двойные изображения, оборачиваем их, потом ищем одинарные игнорируя двойные и оборачиваем в контейнер с другим классом. Ну а дальше, css сделает всё что нужно.

В моём примере (размеры поставил поменьше, чтобы лучше было видно пример) изображения выровнены по центру, каждый в своей половине. Если двойные изображения нужно прижать друг к другу и сделать по центру, то можно задать им разные классы и левому поставить: text-align: right, а правому - text-align:left или ничего не ставить, так как это значение по умолчанию.

$(document).ready(function() {
  $('img + img').wrap('<div class="two-img"></div>');

  $('.two-img').prev('img').wrap('<div class="two-img"></div>');

  $('#content').find('img').each(function() {
    if (!$(this).parent().hasClass('two-img')) {
      $(this).wrap('<div class="single-img"></div>');
    }
  });
});
#content {
  width: 100%;
}
.two-img {
  display: inline-block;
  width: 49%;
  text-align: center;
}
.single-img {
  width: 100%;
  text-align: center;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  <br />
  <img width="400" src="http://image-store.slidesharecdn.com/43866d9a-aadb-11e2-9fdf-22000a93b239-medium.jpg" alt="" />
  <br />text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  <br />
  <img width="200" src="http://image-store.slidesharecdn.com/43866d9a-aadb-11e2-9fdf-22000a93b239-medium.jpg" alt="" />
  <img width="200" src="http://image-store.slidesharecdn.com/43866d9a-aadb-11e2-9fdf-22000a93b239-medium.jpg" alt="" />
  <br />text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  <br />
</div>