前端 - 外 div 宽度随窗口，内 div 固定宽高并且是内联，内 div 内的图片如何水平和垂直居中？
说得比较抽象，就是以这里的 grid example 为基础：https://sortablejs.github.io/Sortable/#grid 。如果图片的宽大于高，则上下的空白等同。如果图片的宽小于高，则左右的空白等同。图片的宽高不确定。
用谷歌和 AI 花了很长时间，一直没解决。
共有1个答案
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.css">
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.grid-item {
position: relative;
border: 2px solid #ccc;
padding-top: 100%; /* 默认填充比例 */
}
.grid-item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<div class="grid-container" id="sortable">
<div class="grid-item"><img src="image1.jpg" alt="Image 1"></div>
<div class="grid-item"><img src="image2.jpg" alt="Image 2"></div>
<div class="grid-item"><img src="image3.jpg" alt="Image 3"></div>
<!-- 其他图片项 -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
<script>
// 初始化Sortable
new Sortable(document.getElementById('sortable'), {
grid: [20, 20], // 可选，设置拖拽的网格间距
});
// 获取图片元素并动态设置空白
document.querySelectorAll('.grid-item img').forEach(img => {
img.onload = () => {
const width = img.naturalWidth;
const height = img.naturalHeight;
const item = img.closest('.grid-item');
if (width > height) {
item.style.paddingTop = `${(height / width) * 100}%`; // 宽大于高时调整上下空白
} else {
item.style.paddingTop = '100%'; // 宽小于高时，默认填充上下比例
}
}
});
</script>
</body>
</html>-
问题内容： 编码： 如现在所呈现的，跨度与div的左下角对齐。 问题答案： 请参阅我关于理解垂直对齐的文章。在讨论的最后，有多种技术可以实现您想要的。 （超简短摘要：或者将子级的行高设置为等于容器的高度，或者将子级的高度设置为在容器上并将子级绝对定位为，其中YYY为子级已知高度的一半。）
-
我知道这个问题已经被问过很多次了，但我已经试过了我所读到的任何东西。 我想水平和垂直对齐一个div内的img。 容器div在一个modal中显示图片，一旦点击它的预览。那么它将包含任意大小的图片。 我可以水平或垂直对齐，但不能同时对齐。 HTML代码:https://pastebin.com/7dcq1ajg null 模态示例（img未垂直对齐）:https://ibb.co/j4nj1q （.
-
问题内容： 我有一个div 200 x 200像素。我想在div的中间放置一个50 x 50像素的图像。 怎么做到呢？ 我可以通过使用div 使它水平居中。但是垂直对齐是个问题。 问题答案： 就个人而言，我将其作为div中的背景图像放置，其CSS为： （假设您已经在指定div 并添加div 应该不是问题） 让浏览器承受压力。
-
问题内容： 我弹出一个包含ASP.NET表单的弹出窗口，单击链接“请求信息”，然后出现该表单。 但是，具有链接“请求信息”以触发弹出窗口的页面包含很多内容，因此需要滚动才能看到该链接。 如果用户滚动阅读内容，则需要始终居中，否则，如果他们不滚动，弹出窗口仍将居中显示在屏幕上。 在绝对定位，整个页面宽度与边距设置为。 问题答案： 如果div具有固定的宽度和高度，请使用：（如果width = 120p
-
问题内容： 有没有办法在 垂直和水平方向上输入一个DIV， 但这很重要， 当窗口小于内容时，内容将不会被剪切 。div必须具有背景色，宽度和高度。 我总是将div的中心定位为绝对位置和负边距，如提供的示例所示。但是它有一个问题，那就是削减内容的顶部。有没有一种方法可以将div.content居中而不会出现此问题？ CSS： HTML： 我的问题不是重复的“如何在水平和垂直方向上居中放置元素？”1-
-
问题内容： 这将是垂直居中在限定的宽度/高度的任何内容的正确方法。 在示例中，有两个具有不同高度的内容，什么是使用class垂直居中的最佳方法？（并且适用于所有浏览器，而没有的解决方案） 想到了一些解决方案，但想知道其他想法，一个正在使用和。 问题答案： 我对此进行了一些研究，从中发现您有四个选择： 版本1：父div，显示为表格单元 如果您不介意在父div上使用，则可以使用以下选项： 版本2：具有
-
问题内容： 是否可以将 div 垂直居中于％height div中 ？ 问题答案： 在这里以及整个Internet上，已经被要求足够多次了。 快速搜索将为您带来大量结果。无论如何，我这样做的首选方式是使用和。
-
问题内容： 我有一个设置为（ 和），我有一些文字里。 我需要文本在垂直和水平方向的中心对齐。 我已经尝试过了，但是它没有做水平部分，所以我尝试了，但是没有用。 有任何想法吗？ 问题答案： 如果是一行文本和/或图像，则很容易做到。只需使用： 而已。如果可以是多行，那么它会稍微复杂一些。但是在http://pmob.co.uk/上有解决方案 。查找“垂直对齐”。 由于它们往往是黑客或添加复杂的div