Вертикально и горизонтально Расположите изображение в центре, если вы не знаете его размер. - PullRequest
Новая
       10

Вертикально и горизонтально Расположите изображение в центре, если вы не знаете его размер.

12 голосов
/ 13 марта 2010

Если у меня есть контейнер контейнера фиксированного размера и изображение неизвестного размера, как я могу центрировать его по горизонтали и вертикали?

  • с использованием чистого CSS
  • с использованием JQuery, если css не может этого сделать

Этот ответ имеет смысл для фиксированной ширины изображений, но не переменных.

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

<ul id="gallery">
    <li id="galleryItem1">
        <div class="imageContainer">
            <img src="gallery/image1"/>
        </div>
        <p>Some text to the right...</p>
        <!-- more stuff -->
    </li>
    <li id="galleryItem2">
    <!-- ... -->
</ul>

Спасибо за помощь!

Ответы [ 12 ]

0 голосов
/ 16 мая 2014

Я использовал 

.on('load', function () {

вместо 

.each(function(){

используется в этот ответ помогает устранить проблему с пустыми значениями высоты и ширины, когда изображение еще не загружено 

<style type="text/css">
.fixed-div {
    position: relative;
}

.variable {
    width: 100%;
    height: auto;
}

.variable.js-fix {
    position:absolute;
    top:50%;
    left:50%;
}
</style>

<script type="text/javascript">
jQuery(document).ready(function(){
    $(".fixed-div img.variable").on('load', function () {
        //get height and width (unitless) and divide by 2
        var hWide = ($(this).width())/2; //half the image's width
        var hTall = ($(this).height())/2; //half the image's height, etc.
        console.log("width", $(this).width());
        console.log("height", $(this).height());

        // attach negative and pixel for CSS rule
        hWide = '-' + hWide + 'px';
        hTall = '-' + hTall + 'px';

        $(this).addClass("js-fix").css({
            "margin-left" : hWide,
            "margin-top" : hTall
        });
    });
});
</script>

<div class="fixed-div">
    <img class="variable" src=""/>
</div>
0 голосов
/ 22 июня 2012

Использовать высоту: 100% для тега html, тега body, контейнера и пустого элемента-заполнителя, а также display: inline-block;и вертикальное выравнивание: середина для содержимого и заполнителя для вертикального центрирования содержимого, которое имеет неопределенную высоту в браузерах.Элемент-заполнитель имеет высоту 100% для поддержки линейного блока, так что вертикальное выравнивание: середина имеет желаемый эффект.Используйте контейнер фиксированной ширины для переноса изображений.

Используйте display: inline для содержимого div и выравнивания текста по центру к div контейнера, чтобы выполнить горизонтальное центрирование для содержимого с неопределенной шириной в браузерах.

Объедините обе техники для создания галереи центрированных изображений: 

<!doctype html>
<html>
<head>
<title>Centered Image Gallery</title>
<style type="text/css">
html, body, .container, .placeholder { height: 100%;}

img { margin-left: 20px; margin-top: 10px; }

.container { text-align:center; }

/* Use width of less than 100% for Firefox and Webkit */
.wrapper { width: 50%; }

.placeholder, .wrapper, .content { vertical-align: middle; }

/* Use inline-block for wrapper and placeholder */
.placeholder, .wrapper { display: inline-block; }

.fixed { width: 900px; }

.content { display:inline; }

@media,
 {
 .wrapper { display:inline; }
 }
 </style>

</head>
  <body>
  <div class="container">
    <div class="content">
        <div class="wrapper">
          <div class="fixed">
            <img src="http://microsoft.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://microsoft.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
        </div>
      </div>
   </div>
   <span class="placeholder"></span>
</div>

</body>
</html>
Страница:
...