Question

我希望有一个响应式图像库，其中包含3个图像，这些图像垂直放置，所有屏幕尺寸的图像库都位于图像库的中心。当屏幕到达较大屏幕的断点时，我希望图像库更改为水平方向。我已经让图像响应，但我不能让标题持有者集中在上面。

这是我的HTML：

<div class="projects-section">
     <div class="projects-title-container">
          <p class="projects-title">Projects</p>
          <div class="bar-under-projects-title"></div>
     </div>    
     <ul class="project-picture-gallery">
          <li class="project-item" id="light-shoulders-picture"></li>
          <li class="project-item" id="Wildfire-picture"></li>
          <li class="project-item" id="TheIMDBOfSportsPicture"></li>
     </ul>
</div>

这是CSS：

.projects-section, .project-picture-gallery {
  display: flex;
  flex-direction: column;
}

.projects-section {
    justify-content: space-between;
    background-color: black;
    position: relative;
}

.project-picture-gallery {
  flex: 1;
  justify-content: space-around;
}

#light-shoulders-picture {
    background: url('/HTML/LightShouldersOfficialLogo/LightShouldersOfficialLogo.png') center center no-repeat;
    background-size: 100%;
    width: 100%;
    padding-top: 50.806451%;
    height: 0;
}
#Wildfire-picture {
    background: url('/HTML/WildfireOfficialLogo/WildfireOfficialLogo.png') center center no-repeat;
    background-size: 100%;
    width: 100%;
    padding-top: 34.7399411%;
    height: 0;
}
#TheIMDBOfSportsPicture {
    background: url('/HTML/LightShouldersOfficialLogo/LightShouldersOfficialLogo.png') center center no-repeat;
    background-size: 100%;
    width: 100%;
    padding-top: 50.806451%;
    height: 0;
}

.projects-title-container {
    margin: auto;
    width: 200px;
    height: 70px;
    position: absolute;
}
.projects-title {
    color: white;
    text-align: center;
}
.bar-under-projects-title {
    background-color: #B34443;
    height: 6px;
    width: 50px;
}
@media all and (min-width: 600px) {
  .projects-section, .project-picture-gallery {
    flex-direction: row;
  }
}

@media all and (min-width: 1030px) {
    .projects-section, .project-picture-gallery {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .projects-section {
        justify-content: space-between;
    }

    .project-picture-gallery {
        flex: 1;
        justify-content: space-around;
    }
}

.project-picture-gallery {
  list-style: none;
}

.project-picture-gallery li {
  margin: 12px 12px 12px 12px;
}

.project-picture-gallery li:hover {
  background-color: rgba(255,255,255,0.7);
}


@media all and (min-width: 1030px) {
  .projects-section {
    min-width: 768px;
  }
}

我不明白我需要对标题持有人做些什么才能让它始终位于图片库的中心位置。有什么想法吗？

当屏幕较大时，它应该是这样的，但是我没有看到它应该看起来像默认的小屏幕的图片。较小的屏幕应具有相同的标题，但列表项目在列中：

Answer 1

如果我正确地解释您的问题，您希望始终将标题保持在屏幕中心，但希望图像水平放置在更宽的屏幕上，并且垂直放置在较小的屏幕上。

您在问题中提供的代码并未重现问题。但是，这是一个可以帮助您（和其他人）的通用解决方案。

<强> HTML

<div id="container">
    <div class="projects">Projects</div>
    <div class="gallery">
        <ul>
            <li><img src="http://placehold.it/150x100"></li>
            <li><img src="http://placehold.it/150x100"></li>
            <li><img src="http://placehold.it/150x100"></li>
        </ul>
    </div>   
</div>

<强> CSS

#container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery {
    width: 100%;
}

ul {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    padding: 0;
}

@media screen and ( max-width: 500px ) {
    ul { 
        flex-direction: column; 
        align-items: center; 
    }
}

DEMO：http://jsfiddle.net/mr44qd8z/（重新调整大小效果）

Flexbox图片库中间有标题持有人？

1 个答案: