Html 顶部和底部带有衬垫的对中轨道通道

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

因此，我在functions.php

add_image_size（'gallery scroll'，900，1500，false）中编辑了具有100%高度图像的图库内容最大高度1500px，最大宽度900px

我需要将它们居中，比如添加到100%窗口的图像div高度，然后添加到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>

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

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

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

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

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

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

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

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

还可以根据每个屏幕大小更改图像大小-

1.）以%年龄而不是像素表示图像高度。

2.）使用一系列@media查询，根据当前屏幕大小将宽度和高度设置为不同的值。
我并不完全清楚您的问题，但据我所知，您需要将图像置于屏幕中央，而不受屏幕大小的影响

为此，将以下css设置为图像容器

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

margin left:auto
和
margin right:auto
或干脆
margin:auto
将元素设置到页面的中心。即元素两侧的边距相等（如果元素小于父元素）

verical align:middle
正如名字本身所暗示的那样，它会将分区对齐到中间。
坦斯克兄弟，但我在这两个变体中插入了这个css，它对我不起作用。您是否使用此css检查了网站1，与网站示例2类似？^^谢谢！！您是否试图将图像置于屏幕中心（水平和垂直），而不受屏幕大小的影响？我不完全理解这个问题。不，我有图库导轨，就像所有图片都向左和向右移动一样，就像滚动图库，但在按钮上。我正在尝试将我的图片大小调整为1400px到窗口大小的高度，然后将底部和顶部的填充物交给这个画廊^^打开网站2你会很快理解的^^谢谢！！对不起，我不太懂英语。我想让我的网站上的图库类似于使用网站2的图库（将最大高度添加到100%屏幕的图像中，并将顶部和底部的填充物添加到该区块中，如问题中的第二个网站所示）