3

这是我想在 CSS 中执行的操作的图像： image。

有任何想法吗？

4

5 回答 5

2

创刊号

居中没有明确宽度的元素

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

更大的问题

没有未使用的空间用于将包装器置于其容器中

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

当收缩包装的父级中的内容环绕到下一行时，父级停止收缩包装；它现在占据了它自己的容器的整个宽度。从技术上讲，父对象是居中的，因为它完全填满了容器，但它的内容不是居中的。除非父级有明显的背景颜色或壁纸图像，否则父级似乎也不居中。

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

解决方案

媒体查询

事实证明有一个简单的 CSS 解决方案。基本问题是这种单一的布局网格不能支持广泛的屏幕尺寸并且仍然将内容居中。但是在CSS3 媒体查询的帮助下，可以创建各种布局网格，并根据屏幕大小选择合适的网格。

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

换句话说，与其试图强制一个布局来处理所有浏览器尺寸，不如创建许多布局，然后选择一个可以轻松处理当前浏览器尺寸的布局。

于 2013-03-05T18:18:13.827 回答
0

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

于 2013-03-05T17:08:11.037 回答
0

只需将 CSS 属性赋予包装器

#wrapper{
margin: 0px auto;
}

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

于 2013-03-05T17:11:53.880 回答
0

您想要居中的 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>
于 2013-03-05T17:15:44.693 回答
0

由于懒得实现媒体查询（以及要考虑的多个场景），我实现了一个简单的解决方案。将图像放入一个无序列表（其中 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>
于 2013-10-23T14:33:02.197 回答