Центрирующее положение: исправлено div

Я пытался в течение нескольких дней сосредоточиться на позиции: фиксированный элемент, было найдено множество решений по всей сети, но все же из-за неэффективности или моей собственной неопытности никто из них не работал ,Центрирующее положение: исправлено div

Сценарий выглядит следующим образом; Я хочу сделать козырек изображения, каждый раз, когда вы нажимаете изображение, фиксированный div становится видимым, удерживая указанное изображение, это фактически выполняется с помощью JavaScript. Проблема возникает, когда я хочу центрировать div, независимо от того, какое разрешение вы используете. ширина и высота

#galleryimage{ 
    position:fixed; 
    z-index:200; 
    display:none; 
    max-height: 100%; 
    max-width: 100%; 
} 

#galleryimage img{ 
    max-width:100%; 
    max-height:100%; 
}

Изображения неизвестные переменные, я не достаточно опытный с JS, чтобы справиться с этим, так что я хотел бы сделать это с чистым CSS. Однако я никогда не мог сосредоточиться. Маржа просто не работает, и формула с отрицательным отрезком тоже не будет, поскольку я не знаю переменных ширины и высоты этих изображений.

Любое решение?

источник

2014-02-19 Fushimi

Я бы использовал JavaScript + jQuery для этого, чтобы облегчить жизнь. Хорошая отправная точка для вас:

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    </head> 
    <style> 
     #galleryimage{ 
     position:fixed; 
     z-index:200; 
     height: 100%; 
     width: 100%; 
     opacity: 0; 
     } 

     #galleryimage img{ 
     position: absolute; 
     left: 50%; 
     top: 50%; 
     } 

    </style> 
    <body> 

     <div id="galleryimage"> 

     <img src="" /> 

     </div> 

    </body> 
    <script type="text/javascript"> 

     $(document).ready(function(){ 

     loadGalleryImage('your_image_name.jpg'); 

     }); 

     function loadGalleryImage(src){ 

     $("#galleryimage img").on('load', function(){ 

      $(this).css({marginTop: -($(this).height()/2), marginLeft: -($(this).width()/2)}); 
      $("#galleryimage").animate({opacity:1}, 200); 
      $("#galleryimage img").off('load'); 

     }); 

     $("#galleryimage img").attr('src', src); 

     } 

     function hideGalleryImage(){ 
     $("#galleryimage").animate({opacity:0}, 200); 
     } 

    </script> 
    </html>

Это использует несколько приемов. В CSS изображение абсолютно позиционируется и помещается на 50% для верхнего и нижнего. Затем, используя jQuery, как только мы узнаем, что изображение загружено, мы можем определить его ширину и высоту и засунуть его влево и вверх на половину этих значений. Это помещает его прямо в центр экрана. Я добавил некоторые анимационные материалы там для прекрасного :)

источник

2014-02-19 20:20:15 koosa

Вы можете использовать display: table-cell для вертикального выравнивания чего-то посередине. Вы должны заставить div растянуться до 100% от вашего фиксированного положения div. Я сделал быстрый jsfiddle:

http://jsfiddle.net/fm2GD/2/

В принципе, вы должны иметь изображение в ячейке таблицы:

#tableCell{ 
    height: 100%; 
    width: 100%; 
    display:table-cell; 
    text-align:center; 
    vertical-align:middle; 
}

, который находится в "таблице":

#table{ 
    height: 100%; 
    width: 100%; 
    display:table; 
}

который покрывает 100% вашего фиксированного положения div.

источник

2014-02-19 20:34:02 Josh

Центрирующее положение: исправлено div

ответ

Смежные вопросы