Как центрировать абсолютно позиционированный контент неизвестной ширины? - PullRequest
Новая
       42

Как центрировать абсолютно позиционированный контент неизвестной ширины?

23 голосов
/ 21 февраля 2012

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

Я создаю зрителя для картин, которые должны растягиваться, чтобы заполнить страницу, ну 90% высоты экранаточнее.Я хочу, чтобы картины были плавнее друг над другом и центрировать каждую из них по центру экрана.

Чтобы нарисовать картины друг над другом, мне нужно расположить их «абсолютно», чтобы остановить ихот укладки.Вот где проблема приходит.С тех пор, как я установил их в абсолют, каждый метод, который я использую для центрирования содержащего div, не работает.

Отчасти проблема в том, что я не устанавливаю ширину для картин, как я хочу ихчтобы динамически изменять размер себя, чтобы заполнить 90% экрана пользователя.

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

HTML- 

<div id="viewer_div">
    <img src="" id="first" />
    <img id="second" class="hidden"/>
</div>

Таблица стилей 

#viewer_div {
        width:1264px;
}


img {
    height:90%;
    display:block;
    margin-left: auto;
    margin-right:auto;
}

Вышеприведенное дает мне желаемый эффект, но не даетНе позволяйте мне позиционировать изображения абсолютно.Кто-нибудь может предложить способ центрирования изображений, но также позволяет мне плавно переходить одно поверх другого?

Ответы [ 3 ]

52 голосов
/ 19 марта 2015

Перемещение элемента left на 50% его ширины и последующий перевод его по горизонтали на 50% сработало для меня. 

.element {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Я нашел концепцию в следующей ссылке, а затемЯ перевел, чтобы соответствовать моим потребностям выравнивания по горизонтали: https://gist.github.com/colintoh/62c78414443e758c9991#file-douchebag-vertical-align-css

40 голосов
/ 21 февраля 2012

Либо используйте JavaScript, чтобы вычислить ширину и переместить ее,

используйте CSS-хак, чтобы переместить элемент вправо и влево на 50%,

или не устанавливайте его абсолютно.

Этот ответ невероятно короткий, но он к сути. Если вам требуется что-то централизовать (то есть вы хотите, чтобы браузер определил, где находится центральная точка, и разместите его там), то вы не можете использовать абсолютное позиционирование - потому что это отнимает контроль у браузера.

Чтобы нарисовать картины друг над другом, мне нужно расположить их «Абсолютно», чтобы помешать им складываться.

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

Если у вас возникли проблемы с размещением элементов друг на друге, оберните изображения в абсолютно позиционированный контейнер, ширина которого 100% и text-align: center

Если вы чувствуете, что абсолютное позиционирование необходимо, для достижения желаемых результатов можно использовать следующий хак: 

div {
    position: absolute;
    /* move the element half way across the screen */
    left: 50%;
    /* allow the width to be calculated dynamically */
    width: auto;
    /* then move the element back again using a transform */
    transform: translateX(-50%);
}

Очевидно, что вышеуказанный хак имеет ужасный запах кода , но он работает в некоторых браузерах. Имейте в виду: этот взлом не обязательно очевиден для других разработчиков или других браузеров (особенно IE или мобильных устройств).

5 голосов
/ 19 января 2016

Чтобы отклониться от ответа Самека, вы также можете использовать его для центрирования элемента абсолютного положения по вертикали и горизонтали неизвестных измерений: 

#viewer_div {
  position: relative;
}
#viewer_div img {
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%, 50%);
}
...