内容简介：翻译自：https://stackoverflow.com/questions/32528425/centering-items-with-flexbox-and-overflow
问题摘要
我想要的布局是能够在页面上(纵向和横向)居中显示未知大小的图像.如果图像太大而无法适合任何一个方向,我想显示滚动条,以便用户可以滚动查看完整图像.我遇到的问题是,当图像太大而不适合时,图像的顶部和左侧(取决于截断的部分)将永远无法滚动到.
试图解决方案
我试图使用flexbox来实现所需的布局,但不要求使用flexbox.这是一个重现问题的小例子(请注意,我没有在CSS中添加任何浏览器前缀,因此您需要在Chrome中查看此内容[或者也可能是Firefox？])：
.body {
height: 600px;
}
.container {
margin: auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid red;
height: 100%;
overflow: auto;
}
img {
border: 5px solid black;
}
<div class="body">
<div class="container">
<img src="http://placehold.it/700x700" />
</div>
</div>
您应该能够在图像周围完全看到边框,但是当窗口缩小时,图像的左侧和/或顶部会被切断.随着窗口继续缩小,越来越多的图像将变得不可见.
请注意,如果那里有图像似乎并不重要.这是一个使用普通旧div来显示问题的片段：
.body {
height: 600px;
margin-top: 80px;
}
.container {
margin: auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid red;
height: 100%;
overflow: auto;
}
.content {
border: 5px solid black;
width: 600px;
height: 600px;
background-color: gray;
}
<div class="body">
<div class="container">
<div class="content"></div>
</div>
</div>
同样,整个div应该总是可以通过滚动来访问,但事实并非如此.
题
如何仅使用HTML和CSS实现上述所需的布局(JS答案不被接受)？ Flexbox不是解决问题所必需的,但它将是一个不错的选择.
谢谢！
如果你还在寻找,或者对其他任何对简单解决方案感兴趣的人：
您可以通过将图像包装在Flex容器中的容器中来实现此目的,如下所示：
> Flex容器
>显示：flex
>身高：100vh
>内部容器
>保证金：自动
这就是在视口中垂直和水平居中显示未知大小的图像所需的全部内容,而不会失去滚动到其任何部分的能力,以防它不适合任何一个方向.
示例1 :(以视口为中心的图像)
body {
margin: 0; /* Override user agent styles */
}
.flex {
display: flex;
height: 100vh;
}
.container {
margin: auto;
}
<body class="flex">
<main class="container">
<img src="http://placehold.it/100x100">
</main>
</body>
示例2 :(图像不适合视口,但仍可滚动)
body {
margin: 0; /* Override user agent styles */
}
.flex {
display: flex;
height: 100vh;
}
.container {
margin: auto;
}
img {
border: 1px solid red;
}
<body class="flex">
<main class="container">
<img src="http://placehold.it/1000x1000">
</main>
</body>
它适用于最新版本的Chrome,Firefox,Opera和Edge.
翻译自：https://stackoverflow.com/questions/32528425/centering-items-with-flexbox-and-overflow
以上所述就是小编给大家介绍的《css – 使用Flexbox和溢出来居中项目》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
C程序设计(第四版)
谭浩强 / 清华大学出版社 / 2010-6-1 / 33.00元
由谭浩强教授著、清华大学出版社出版的《C程序设计》是一本公认的学习C语言程序设计的经典教材。根据C语言的发展和计算机教学的需要，作者在《C程序设计(第三版)》的基础上进行了修订。 《C程序设计(第4版)》按照C语言的新标准C99进行介绍，所有程序都符合C99的规定，使编写程序更加规范；对C语言和程序设计的基本概念和要点讲解透彻，全面而深入；按照作者提出的“提出问题―解决问题―归纳分析”三部曲......一起来看看 《C程序设计(第四版)》 这本书的介绍吧!
