Question

这是我想在CSS中做的事情的图像： image

有什么想法吗？

Answer 1

初始问题

居中没有明确宽度的元素

这可以防止margin: 0 auto;的常规解决方案成为一种选择。

更大问题

没有未使用的空间将包装器集中在其容器中

如果一个元素的宽度由其内容的宽度决定，则称该元素是收缩包装的。如果内容的大小发生变化，则元素的宽度也会同样变化。这是内联，内联块或浮动元素的默认行为。

当收缩包装的父级中的内容环绕到下一行时，父级将停止收缩包装;它现在占据了自己容器的整个宽度。从技术上讲，父级是居中的，因为它完全填充容器，但其内容不居中。除非父母有明显的bg颜色或壁纸图像，否则父母看起来也不会居中。

这也适用于一些更高级的功能，例如CSS3 flexbox，显然也阻止了它成为一个选项。

<强>解决方案

媒体查询

事实证明，有一个简单的CSS解决方案。基本问题是这种单一布局网格不能支持各种各样的屏幕尺寸，仍然是内容的中心。但是在CSS3 media queries的帮助下，可以创建各种布局网格，并根据屏幕尺寸选择合适的布局网格。

例如，创建具有1列的布局网格，以及具有2列的布局网格，以及具有3列的布局网格，依此类推，以获得可能需要的列数。无论哪个网格适合当前屏幕尺寸，都是使用的网格。布局网格可能是相同的，除了每个给定的固定宽度，宽度足够大以适合列数。由于每个网格都有一个固定的宽度，因此使用margin: 0 auto;将它们水平居中变得微不足道。

换句话说，不是试图强制单个布局来处理所有浏览器大小，而是创建许多布局，并选择一个可以轻松处理当前浏览器大小的布局。

Answer 2

将所有div放在另一个div中并使两侧的边距自动化。请参阅此综合示例：Problem centering div with css

Answer 3

只需将CSS属性设为包装器

即可

#wrapper{
margin: 0px auto;
}

当您调整浏览器窗口大小时，上面的代码将自动对齐中心。这是向您的网页添加响应的过程。

Answer 4

您要居中的div必须具有宽度，您必须设置自动边距。这是一个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}

#wrapper{
width: 800px;
min-height: 200px;
margin: auto;
}

.block{
width: 100px;
height: 100px;
float: left;
}

</style>
</head>
<body>
<div id="wrapper">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>
</body>
</html>

Answer 5

懒得实现媒体查询（以及要考虑的多个场景），我实现了一个简单的解决方案。将图像放在无序列表（li {display：inline-block}）中，然后（text-align：center）包装器。稍后调整边距等以使其漂亮。

<style>
    #wrapper {
        text-align: center;
    }
    #wrapper li {
        display: inline-block;
    }
</style>

<div id="wrapper">
    <ul>
        <li><img src=""></img></li>
        <li><img src=""></img></li>
        <li><img src=""></img></li>
        <li><img src=""></img></li>
        <li><img src=""></img></li>
    </ul>
</div>

调整页面大小后居中可变宽度网格

5 个答案: