使用 Flexbox 和 Overflow 居中项目 [英] Centering Items with Flexbox and Overflow

问题描述

问题总结

我想要的布局是能够在页面上居中(垂直和水平)未知尺寸的图像.如果图像太大而无法适应任一方向，我想显示滚动条，以便用户可以滚动查看完整图像.我遇到的问题是，当图像太大而无法容纳时，图像的顶部和左侧(取决于被切掉的部分)将永远无法滚动到.

尝试的解决方案

我正在尝试使用 flexbox 来实现所需的布局，但 flexbox 不是必需的.这是一个重现该问题的小示例(请注意，我没有在 CSS 中放置任何浏览器前缀，因此您可能希望在 Chrome [或 Firefox，也可以?] 中查看它):

.body {高度:600px；}.容器 {保证金:自动；显示:弹性；对齐项目:居中；对齐内容:居中；边框:1px纯红色；高度:100%；溢出:自动；}图像{边框:5px纯黑色；}

<div class="容器"><img src="http://placehold.it/700x700"/>

您应该能够完全看到图像周围的边框，但是随着窗口缩小，图像的左侧和/或顶部会被截断.随着窗口继续缩小，越来越多的图像将变得不可见.

请注意，其中是否有图像似乎无关紧要.这是一个仅使用普通 div 来显示问题的片段:

.body {高度:600px；边距顶部:80px；}.容器 {保证金:自动；显示:弹性；对齐项目:居中；对齐内容:居中；边框:1px纯红色；高度:100%；溢出:自动；}.内容 {边框:5px纯黑色；宽度:600px；高度:600px；背景颜色:灰色；}

<div class="容器"><div class="content"></div>

同样，整个 div 应该始终可以通过滚动访问，但事实并非如此.

问题

如何仅使用 HTML 和 CSS(不接受 JS 答案)实现上述所需的布局?Flexbox 不是解决问题所必需的，但它会是一个不错的选择.

谢谢！

解决方案

只需从 .container 中删除 justify-content 并在图像中添加 margin: auto.

.body {高度:600px；}.容器 {保证金:自动；显示:弹性；/* 对齐项目:居中；//不再需要这个 *//* 对齐内容:居中；//删除这个 */边框:1px纯红色；高度:100%；溢出:自动；}图像{边框:5px纯黑色；保证金:自动；/* 添加这个 */}

<div class="容器"><img src="http://placehold.it/700x700"/>

Problem Summary

My desired layout is to be able to center (both vertically and horizontally) an image of unknown size on the page. If the image is too big to fit in either direction, I want to show scroll bars so the user can scroll to see the full image. The issue I've run in to is that when the image is too big to fit, the top and left of the image (depending on what portion is cut off) will never be able to be scrolled to.

Attempted Solution

I am attempting to use flexbox to achieve the desired layout, but flexbox is not a requirement. Here is a small example that reproduces the problem (note that I haven't put any browser prefixes in the CSS, so you will want to view this in Chrome [or maybe Firefox, too?]):

.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>

You should be able to see the border completely around the image, but the left and/or top part of the image will get cut off as the window shrinks. More and more of the image will become un-viewable as the window continues to shrink.

Note that it doesn't seem to matter if there is an image in there. Here's a snippet just using plain-old divs to show the problem:

.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>

Again the entire div should always be reachable by scrolling, but it is not.

Question

How can I achieve the desired layout described above using only HTML and CSS (JS answers not accepted)? Flexbox is not required to solve the problem, but it would be a nice-to-have.

Thanks!

解决方案

Just remove the justify-content from your .container and add a margin: auto to your image.

.body {
  height: 600px;
}

.container {
  margin: auto;
  display: flex;
  /* align-items: center; // no need for this anymore */
  /* justify-content: center; // remove this */
  border: 1px solid red;
  height: 100%;
  overflow: auto;
}

img {
  border: 5px solid black;
  margin: auto;  /* add this */
}

<div class="body">
  <div class="container">
    <img src="http://placehold.it/700x700" />
  </div>
</div>

这篇关于使用 Flexbox 和 Overflow 居中项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！