Question

我在堆栈溢出中找到了以下代码。

但是，该代码不会使图像居中。有人可以帮我吗？

HTML：

<div class="photo">
<a href="#">
    <img src="https://www.weebly.com/editor/uploads/2/9/9/6/29968995/custom_themes/185017182709687634/files/img/beforeafter/s6.jpg" alt="before" class="before">
    <img src="https://www.weebly.com/editor/uploads/2/9/9/6/29968995/custom_themes/185017182709687634/files/img/beforeafter/s1.jpg" alt="after" class="after">
</a>
</div>

CSS：

    img {
width: 300px;
}
.photo {

position: relative;
overflow-x: hidden;
}
.photo .after {
position: absolute;
top: 0;
left: 0; 
display: none;
}
.photo .before:hover + .after, .after:hover {
display: block;
}

Answer 1

有多种方法可以最简单地实现Flex布局，您需要编辑photo类的CSS，并添加以下代码行：

.photo {
  display: flex;
  justify-content: center; //horizontal align to center
 /* align-items: center*/ -->  this will align it vertically.  
}

flex的默认方向是行（水平），属性的行为也相应。如果我们更改flex-direction: column，justify-content和align-items的行为取决于方向。

有关Flexbox的更多信息：有关CSS flexbox的最佳文章：https://css-tricks.com/snippets/css/a-guide-to-flexbox

居中翻转图像

1 个答案: