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

Я использую Skeleton и Normalize css. Я хочу центрировать два изображения рядом друг с другом по вертикали и горизонтали внутри контейнера div. Когда страница становится уже, я хочу, чтобы второе изображение было внизу первого изображения, как показано ниже.

Normal width:
img1 img2

Narrow view:
img1
img2

Вот мой код:

<div id="center">
    <div class="left">
        <img class="u-max-full-width" src="img1.jpg">
    </div>        
    <div class="right">
        <img class="u-max-full-width" src="img2.jpg">
    </div>
</div>

И вот мой css:

#center {
    width: 100%;
    text-align: center;
    position: relative;
    display: table;
}
#center > div {
    display: table-cell;
    vertical-align: middle;
}

.left {
    width: 50%;
    height: 100%;
    text-align: center;
}

.right {
    width: 50%;
    height: 100%;
    text-align: center;
}

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


html css responsive-design normalize-css skeleton-css-boilerplate
person Community    schedule 14.09.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Попробуй это:

.container {
  text-align: center;
  
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex;
  display: flex;
  
  justify-content: center;
  flex-wrap: wrap;

  -webkit-box-align: center;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;

  height: 800px;
}
<div class='container'>

   <img src="//placehold.it/300x300" class="thumbnail" alt="">
   
   <img src="//placehold.it/300x300" class="thumbnail" alt="">

</div>

Редактировать: Сорри неправильно прочитал.. Они не распадаются, если страница становится узкой.

Как указал Франсуа, добавьте это в css:

flex-wrap: wrap;

Другое редактирование: очевидно, у IE есть некоторые проблемы с этим. Сделайте обертку вокруг .container (container_wrapper) или что-то в этом роде. Дай это:

display: flex;
flex-direction: column;
height: 100%;

И убедитесь, что ваш html и тело имеют высоту 100%.

person Jip van Kakerken    schedule 14.09.2016
comment
Теперь два изображения переносятся одно под другое, как я и хотел, но происходят две вещи: 1) он центрирует весь контент на всей странице, а не только div с классом «контейнер», 2) вы использовали два изображения, которые 300x300, поэтому они выглядят нормально, но мои два изображения имеют разную высоту, поэтому они не выровнены по вертикали посередине. Они выровнены по вертикали в нижней части. - person ; 14.09.2016
comment
Мне удалось выровнять содержимое по левому краю, но я не могу вертикально выровнять оба изображения по середине. Есть идеи? - person ; 14.09.2016
comment
Если я запущу фрагмент кода в том виде, в котором он есть сейчас, он будет именно таким, как вы просили. Я не знаю, почему это не работает для вас.. - person Jip van Kakerken; 14.09.2016
comment
Он отлично работает в Firefox и Chrome, но не в IE 8-Edge. В вашем коде попробуйте изменить высоту одного из изображений. - person ; 14.09.2016
comment
Если я добавлю display:table в контейнер и display:table-cell в изображения, IE отобразится правильно, но в Chrome изображения будут сложены друг в друга. - person ; 14.09.2016
comment
Allright нашел для вас решение: добавьте div-оболочку вокруг контейнера. Дайте ему: display: flex; flex-направление: столбец; высота: 100%; О, и убедитесь, что ваш html и тело установлены на 100% высоты - person Jip van Kakerken; 14.09.2016
comment
Спасибо, Джип, но не сработало. Добавлен style=display:flex; flex-направление: столбец; высота: 100%; в обертке и html, body {height: 100%} без изменений в IE из-за столбца, теперь в более широком представлении оба изображения сложены в FF и Chrome. - person ; 14.09.2016
comment
Возможно, потому что он частично поддерживается в IE 8-11 caniuse.com/#feat=flexbox - person ; 14.09.2016
comment
Выяснилось, что IE11 работал в профиле корпоративного браузера, хотя режим документа был установлен на Edge. Как только я сменил профиль браузера на Dekstop, IE смог распознать Flexbox. - person ; 14.09.2016

arrow_upward
0
arrow_downward

С кодом Jip van Kakerken просто добавьте свойство:

flex-wrap: wrap;


.container {
  text-align:           center;
  
  display: 				-webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: 				-moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: 				-ms-flexbox; /* TWEENER - IE 10 */
  display: 				-webkit-flex;
  display: 				flex;
  
  justify-content:      center;

  -webkit-box-align: 	center;
  -webkit-flex-align: 	center;
  -ms-flex-align: 		center;
  -webkit-align-items: 	center;
  align-items: 			center;
  flex-wrap:            wrap;

  height:               800px;
}
<div class='container'>

   <img src="//placehold.it/300x300" class="thumbnail" alt="">
   
   <img src="//placehold.it/300x300" class="thumbnail" alt="">

</div>

person François    schedule 14.09.2016