顶部和底部有垫子的对中轨道廊

Question

我刚刚下载了一个主题，我试着编辑它一点点。

所以，我有100%高的图片的画廊内容，我在functions.php add_image_size( 'gallery-scroll', 900, 1500, false );中编辑了最大高度1500 to和最大宽度900 to。

我需要它们的中心，比如增加图像div高度100%的窗口，然后添加到这个120 of的父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上使用“对齐”属性，例如-

.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将把分歧调整到中间。