Question

我正在尝试创建一个水平滚动的图像库，但无法将其居中放置在窗口中间。我试图将flex的显示添加到身体上，并以此方式进行，但它对我不起作用。

我是flexbox的新手，所以不确定自己是否做对了，我只是在寻找整体建设性的批评和指导。

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 2em;
}

.wrapper {
  display: flex;
  flex-direction: row;
}

img {
  min-height: 400px;
  max-height: 420px;
  display: flex;
  padding-right: 2em;
}

<div class="wrapper">
  <img src="https://source.unsplash.com/collection/1163637/480x480">
  <img src="https://source.unsplash.com/collection/1163637/480x480">
  <img src="https://source.unsplash.com/collection/1163637/480x480">
  <img src="https://source.unsplash.com/collection/1163637/480x480">
  <img src="https://source.unsplash.com/collection/1163637/480x480">
  <img src="https://source.unsplash.com/collection/1163637/480x480">
  <img src="https://source.unsplash.com/collection/1163637/480x480">
</div>

这是Codepen上的示例。

Answer 1

要使div在屏幕上居中，可以如下所示更改top属性：

.wrapper{
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 20%;
}

要隐藏水平滚动，您可以执行以下操作：

html, body{
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}

将鼠标悬停在图像上时将文字覆盖：

  <div class="img_container_1">
   <img src="https://source.unsplash.com/collection/1163637/480x480">
   <div class="overlay">
     <div class="text">Hello World</div>
   </div>
 </div>

  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    height: inherit;
    width: inherit;
    transition: .5s ease;
}

.image_container_1{
   position: relative;
}

.img_container_1:hover .overlay {
  opacity: 1;
}

img {
  min-height: 400px;
  max-height: 420px;
  display: flex;
  padding-right: 2em;
}

.text {
   color: white;
   font-size: 20px;
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   text-align: center;
}

您可以在此处找到完整的演示：https://codepen.io/anon/pen/LJRVwb?editors=1100

Answer 2

要使用flexbox在包装中垂直居中放置所有内容，您需要将align-items: center;添加到.wrapper。

在您的示例中，包装器也匹配其内容的高度，因此除非您给.wrapper设置高度，否则看不到任何区别。

您将body设置为height: 100%;，这就是当前示例垂直滚动的原因。只要您的视图大到足以垂直容纳其所有内容，“删除”即会删除滚动条。

调整后的CSS：

html, body {
  width: 100%;
}

body {
  margin: 2em;
}

.wrapper {
  display: flex;
  align-items: center;
  height: 500px; /* Example height */
  flex-direction: row; /* It's this by default, so you could remove this if you want */
}
img {
  min-height: 400px;
  max-height: 420px;
  padding-right: 2em;
}

我在CodePen上做了一个调整后的示例，可以作为参考：https://codepen.io/happikitsune/pen/rZMOWO

如何在中心对齐图像并在悬停时覆盖文本？

2 个答案: