центрирование изображения по вертикали во всех разрешениях - PullRequest
Новая
       10

центрирование изображения по вертикали во всех разрешениях

0 голосов
/ 06 мая 2010

Мне нужно иметь возможность центрировать изображение по вертикали для всех распространенных разрешений. Многие люди здесь на SO уже задавали этот вопрос раньше, и 90% затем дают этот урок http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

как ответ. Однако при просмотре на моем мониторе с разрешением 1280 x 1024 в FF он не центрируется. И что еще хуже, он ужасно ломается в IE7. Так что это определенно НЕ ответ.

Я гоняюсь за несбыточной мечтой? Решение должно работать для FF и IE 6/7

решение может быть любым, что сработает, хотя я немного пурист, я бы предпочел div вместо table:)

конкретно мне это нужно для этого сайта http://www.codecookery.com/test/index.html

Как видите, это слайд-шоу, которое должно быть в центре.

Ответы [ 3 ]

2 голосов
/ 09 июня 2011

Я считаю, что это решение - то, что вы ищете. У меня нет доступа к IE, чтобы проверить его (это то, что я получаю за использование Linux), но я вполне уверен, что это работает. А что касается div над таблицей, как насчет без оболочки ? Не только это, но если изображение больше, чем разрешение монитора, оно довольно хорошо уменьшится. Вы можете настроить максимальную высоту и максимальную ширину, если хотите немного дополнить края (для очень больших изображений и / или небольших разрешений).

CSS: 

<style>

/* Positioning */
.absoluteCenter {
 margin:auto; /* Required */
 position:absolute; /* Required */
 top:0;bottom:0; /* Aligns Vertically - Remove for Horizontal Only */
 left:0;right:0; /* Aligns Horizontally - Remove for Vertical Only  */
}

/* Sizing */
.absoluteCenter { /* Fallback */
 max-height:100%;
 max-width:100%;
}

</style>

И HTML: 

<img class="absoluteCenter" src="PATHTOIMAGE">

Примечания:

  • Изображения сохраняют соотношение сторон
0 голосов
/ 06 мая 2010

Код здесь менее ужасен, чем код jakpsatweb.cz.

0 голосов
/ 06 мая 2010

Если опция div с фиксированной высотой является опцией, вы можете использовать абсолютную позицию с верхними 50%, а затем использовать отрицательное поле для позиционирования div. Я протестировал следующее в FF3.6, IE6, IE8 и Chrome. 

<html>
<head>
  <style>
    #vertCenter {
        height: 400px; 
        position: absolute; 
        top: 50%; 
        margin-top: -200px;
        border: 1px green solid;
    }
  </style>
</head>

<body>
  <div id="vertCenter">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
  </div>
</body>
</html>
...