Question

我刚下载了一个主题，我正在尝试编辑它。

所以，我的图库内容包含100％高度的图像，我在functions.php add_image_size( 'gallery-scroll', 900, 1500, false );中编辑了最大高度1500px和最大宽度900px。

我需要将它们居中，就像添加到图像div高度100％的窗口然后添加到120px的父div填充。就像它是24'屏幕一样，它会自动将图片调整到更大尺寸的窗口高度。同样，如果笔记本电脑是15'，它将调整为更小的尺寸。我不知道给你们的代码是什么，但这就是我所拥有的：

 <div class="container">    
     <div class="main gallery">
         <div id="frame" style="overflow: hidden;">
             <ul class="image-gallery slidee thumbnails-6" style="transform: translateZ(0px); width: 5400px;">
                 <li class="fade active" data-url-id="767">
                     <a href="http://www.sitename.com/wp-content/uploads/2015/08/DSC07944for-print-21x15-850x1270.jpg" class="thumb full_image" title="SONY DSC" ind="0">
                         <img width="900" height="1345" src="http://www.sitename.com/wp-content/uploads/2015/08/DSC07944for-print-21x15-900x1345.jpg" class="attachment-gallery-scroll" alt="" ind="0">
                     </a>
                 </li>

这是html ，现在 css

.container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.main.gallery {
    float: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-top: 120px;
    padding-bottom: 120px;
}

#frame {
    height: 100%;
}

ul.image-gallery.slidee {
    float: left;
    height: 100%;
    position: relative;
    overflow: hidden;
}

Answer 1

您可以使用几种不同的方法将它们居中，例如 - 1.）使用绝对定位，例如 -

img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  margin-top: -250px; /* Half the height */
  margin-left: -250px; /* Half the width */
 }

2.）或者您可以在li上使用align属性，例如 -

.image-gallery {
 height:100%;
 width: 100%;
 margin: 0;
 padding: 0;
 border: 0;
}

.image-gallery li {
 vertical-align: middle;
 text-align: center;
}

还要根据每个屏幕尺寸更改图像尺寸 -
1.）以％年龄而不是像素为单位给出图像高度 2.）使用一系列@media查询根据当前屏幕大小将宽度和高度设置为不同的值。

Answer 2

我的问题并不完全清楚，但根据我的理解，您需要将图像放在屏幕中央，与屏幕尺寸无关。

为此设置以下css到图像容器

.imagecontainer
{
  margin-left:auto;
  margin-right:auto;
  vertical-align:middle
}

margin-left:auto和margin-right:auto或简称margin:auto会将元素设置为页面的中心。这是元素两边的相等边距（如果元素小于父元素）。

verical-align:middle正如名称本身所暗示的那样，将分裂对齐到中间。

使RAIL GALLERY居中，顶部和底部有填充物

2 个答案: