Question

我一直在尝试使用jQuery构建一个简单的图片库。到目前为止，这就是我所得到的。效果很好，但问题是照片没有垂直居中显示在屏幕上。

这是我正在研究的代码段。如果您以全屏方式运行摘要，则图像会停留在顶部。在支架中显示图像时，如何垂直居中显示图像？

//Options
var showNav = 1;
var keyboardNav = 1;
var showCaption = 1;
var loop = 1;

//Create overlay items
var $overlay = $('<div id="overlay"></div>');
var $image = $('<img>');
var $holder = $('<div class="holder"></div>');
var $caption = $('<p></p>');
var $nav = $('<div class="nav"><a id="close" nohref><span>&times;</span></a><a id="prev" nohref><span>&#8592;</span></a><a id="next" nohref><span>&#8594;</span></a></nav>');
var glength = $('#imageGallery li').length;
var imageIndex, imageLocation, captionText, allowKeyboard;

//Add overlay items to DOM
$('#overlay img').before('');
$holder.append( $image );
$holder.append( $nav );
if ( showCaption ){ $holder.append( $caption ); }
if ( !showNav ){ $nav.hide(); }
$overlay.append( $holder );
$("body").append( $overlay );

//Click image link
$('#imageGallery a').click( function(event) {
    event.preventDefault();
    imageLocation = $(this).attr("href");
	
	// index of clicked item
  	imageIndex = $( '#imageGallery a' ).index(this) + 1;

    //Image focused on
    $image.attr("src", imageLocation);
	
	//Add and remove active class on link
	$(this).addClass('active');
	$('#imageGallery a').not(this).removeClass('active');
	
    //Show alt attribute as caption
    captionText = $(this).children("img").attr("alt");
    $caption.text(captionText);
  	
	allowKeyboard = 1;
    $overlay.show(); 
});

//Close overlay
$image.click(function() {
	allowKeyboard = 0;
	$($overlay).hide();
});

$overlay.click(function(e) {
	if(e.target != this) return;
	$(this).hide();
});

$('#close').click(function() {
	$($overlay).hide();
});
//Cycle images
$('#next').click(function() {
	//check to see if its the last image
	if (glength != imageIndex){
		$('.active').closest('li').next().find('img').trigger('click');
	} else if (loop == 1){
		$('#imageGallery li').first().find('img').trigger('click');
	} 
});

$("body").keydown(function(e) {
	if (keyboardNav == 1 && allowKeyboard == 1) {
		 if(e.which == 37) { $('#prev').trigger("click"); }
		 else if(e.which == 39) { $('#next').trigger("click"); }	
		 else if(e.which == 27) { $($overlay).hide(); }	
	}
});

$('#prev').click(function() {
	//check to see if its the first image	
	if (imageIndex != 1){
		$('.active').closest('li').prev().find('img').trigger('click');	
	} else if (loop == 1){
		$('#imageGallery li').last().find('img').trigger('click');
	}  
});

ul#imageGallery {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: block;
  max-width: 780px;
  text-align: center;
}
ul#imageGallery li {
  display: inline-block;
  padding: 8px;
  background: ghostwhite;
  margin: 10px;
}
ul#imageGallery li a {
  text-decoration: none;
}
ul#imageGallery li a img {
  display: block;
  width: 200px;
}

#overlay {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.9);
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}
#overlay .holder {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}
#overlay .holder img {
  width: 100%;
  max-width: 600px;
  cursor: pointer;
  box-sizing: border-box;
  display: block;
}
#overlay .holder p {
  color: #ffffff;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: 10px;
}
#overlay .holder .nav {
  max-width: 600px;
  margin: 0 auto;
  font-size: 14px;
}
#overlay .holder .nav a {
  color: white;
  opacity: 0.3;
  -webkit-user-select: none;
  cursor: pointer;
}
#overlay .holder .nav a:hover {
  opacity: 1;
}
#overlay .holder .nav #next, #overlay .holder .nav #prev {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 10px;
  width: 50%;
  box-sizing: border-box;
  font-size: 40px;
}
#overlay .holder .nav #next span, #overlay .holder .nav #prev span {
  top: 50%;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
  position: relative;
}
#overlay .holder .nav #next {
  right: 0;
  text-align: right;
}
#overlay .holder .nav #prev {
  left: 0;
  text-align: left;
}
#overlay .holder .nav #close {
  right: 10px;
  top: 0;
  font-size: 30px;
  opacity: 0.6;
  z-index: 1000000;
  position: absolute;
  text-align: left;
  box-sizing: border-box;
}
#overlay .holder .nav #close:hover {
  opacity: 1;
}

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<ul id="imageGallery">
   <li><a href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Caption 1"></a></li>
   <li><a href="https://www.google.com/logos/doodles/2018/new-years-eve-2018-4995722058399744.2-2xa.gif"><img src="https://www.google.com/logos/doodles/2018/new-years-eve-2018-4995722058399744.2-2xa.gif" alt="Caption 2"></a></li>
</ul>

Answer 1

通常，您希望使用flexbox定位项目；这是标准的事情。过去，您不得不处理边距，浮点数，顶部/左侧/右侧/底部和/或执行transform：translate。

如果使用flexbox，您还需要调整显示/隐藏叠加层的方式，因为jQuery的.show（）并不了解您对“ display：flex”而不是“ display：block”的渴望。 / p>

请参见代码中的“已编辑”注释。

Codepen

//Options
var showNav = 1;
var keyboardNav = 1;
var showCaption = 1;
var loop = 1;

//Create overlay items
var $overlay = $('<div id="overlay"></div>');
var $image = $('<img>');
var $holder = $('<div class="holder"></div>');
var $caption = $('<p></p>');
var $nav = $('<div class="nav"><a id="close" nohref><span>&times;</span></a><a id="prev" nohref><span>&#8592;</span></a><a id="next" nohref><span>&#8594;</span></a></nav>');
var glength = $('#imageGallery li').length;
var imageIndex, imageLocation, captionText, allowKeyboard;





//Add overlay items to DOM
$('#overlay img').before('');
$holder.append( $image );
$holder.append( $nav );
if ( showCaption ){ $holder.append( $caption ); }
if ( !showNav ){ $nav.hide(); }
$overlay.append( $holder );
$("body").append( $overlay );

//Click image link
$('#imageGallery a').click( function(event) {
    event.preventDefault();
    imageLocation = $(this).attr("href");
	
	// index of clicked item
  	imageIndex = $( '#imageGallery a' ).index(this) + 1;

    //Image focused on
    $image.attr("src", imageLocation);
	
	//Add and remove active class on link
	$(this).addClass('active');
	$('#imageGallery a').not(this).removeClass('active');
	
    //Show alt attribute as caption
    captionText = $(this).children("img").attr("alt");
    $caption.text(captionText);
  	
	allowKeyboard = 1;

    // EDITED
    //$overlay.show();
    $('#overlay').addClass('show_flex');
});

//Close overlay
$image.click(function() {
	allowKeyboard = 0;
	$($overlay).hide();
});

$overlay.click(function(e) {
	if(e.target != this) return;
	$(this).hide();
});

$('#close').click(function() {

    // EDITED
	//$($overlay).hide();
    $('#overlay').removeClass('show_flex');
});

//Cycle images
$('#next').click(function() {
	//check to see if its the last image
	if (glength != imageIndex){
		$('.active').closest('li').next().find('img').trigger('click');
	} else if (loop == 1){
		$('#imageGallery li').first().find('img').trigger('click');
	} 
});

$("body").keydown(function(e) {
	if (keyboardNav == 1 && allowKeyboard == 1) {
		 if(e.which == 37) { $('#prev').trigger("click"); }
		 else if(e.which == 39) { $('#next').trigger("click"); }	
		 else if(e.which == 27) { $($overlay).hide(); }	
	}
});

$('#prev').click(function() {
	//check to see if its the first image	
	if (imageIndex != 1){
		$('.active').closest('li').prev().find('img').trigger('click');	
	} else if (loop == 1){
		$('#imageGallery li').last().find('img').trigger('click');
	}  
});

ul#imageGallery {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 780px;
  text-align: center;
  
  /* EDITED */
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul#imageGallery li {
  display: inline-block;
  padding: 8px;
  background: ghostwhite;
  margin: 10px;
}
ul#imageGallery li a {
  text-decoration: none;
}
ul#imageGallery li a img {
  display: block;
  width: 200px;
}

#overlay {
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(0, 0, 0, 0.9);
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  
  /* EDITED */
  justify-content: center;
  align-items: center;
  
}
#overlay .holder {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}
#overlay .holder img {
  width: 100%;
  max-width: 600px;
  cursor: pointer;
  box-sizing: border-box;
  display: block;
}
#overlay .holder p {
  color: #ffffff;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: 10px;
}
#overlay .holder .nav {
  max-width: 600px;
  margin: 0 auto;
  font-size: 14px;
}
#overlay .holder .nav a {
  color: white;
  opacity: 0.3;
  -webkit-user-select: none;
  cursor: pointer;
}
#overlay .holder .nav a:hover {
  opacity: 1;
}
#overlay .holder .nav #next, #overlay .holder .nav #prev {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 10px;
  width: 50%;
  box-sizing: border-box;
  font-size: 40px;
}
#overlay .holder .nav #next span, #overlay .holder .nav #prev span {
  top: 50%;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
  position: relative;
}
#overlay .holder .nav #next {
  right: 0;
  text-align: right;
}
#overlay .holder .nav #prev {
  left: 0;
  text-align: left;
}
#overlay .holder .nav #close {
  right: 10px;
  top: 0;
  font-size: 30px;
  opacity: 0.6;
  z-index: 1000000;
  position: absolute;
  text-align: left;
  box-sizing: border-box;
}
#overlay .holder .nav #close:hover {
  opacity: 1;
}

/* EDITED */
.show_flex {
  display: flex !important;
}

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<ul id="imageGallery">
   <li><a href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Caption 1"></a></li>
   <li><a href="https://www.google.com/logos/doodles/2018/new-years-eve-2018-4995722058399744.2-2xa.gif"><img src="https://www.google.com/logos/doodles/2018/new-years-eve-2018-4995722058399744.2-2xa.gif" alt="Caption 2"></a></li>
</ul>

Answer 2

只需使用flexbox。将父项设置为：显示：flex; 证明内容：中心

让我知道您是否坚持使用非Flexbox解决方案。但这是最推荐的一种。

当图像在支架中显示时，图像垂直居中显示

2 个答案: