中间有 Title Holder 的 Flexbox 图片库？

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/（re-size效果截图）

中间有 Title Holder 的 Flexbox 图片库？

Flexbox Image Gallery with Title Holder in the middle?

html

css

flexbox