Fatal编程技术网
  • html/
  • Html 如何在CSS中使容器内的多个div居中

Html 如何在CSS中使容器内的多个div居中

html css

Html 如何在CSS中使容器内的多个div居中,html,css,Html,Css,我正在测试中心分隔器，就像windows metro的样式一样 .container{ 高度：300px； 宽度：70%； 背景：#EEE； 利润率：10px自动； 位置：相对位置； } .街区{ 背景：绿色； 高度：100px； 宽度：100px； 浮动：左； 利润率：10px； } 1.公司名称 2.公司名称 3.公司名称 4.公司名称 5.公司名称 6.公司名称 7.公司名称 8.公司名称 我之前的回答显示了一种明显过时的方法（它仍然有效，只有更好的方法可以实现这一点）。出于这个原因，

我正在测试中心分隔器，就像windows metro的样式一样

.container{
高度：300px；
宽度：70%；
背景：#EEE；
利润率：10px自动；
位置：相对位置；
}
.街区{
背景：绿色；
高度：100px；
宽度：100px；
浮动：左；
利润率：10px；
}

1.公司名称
2.公司名称
3.公司名称
4.公司名称
5.公司名称
6.公司名称
7.公司名称
8.公司名称
我之前的回答显示了一种明显过时的方法（它仍然有效，只有更好的方法可以实现这一点）。出于这个原因，我正在更新它以包含一个更现代的解决方案

见对它的支持；在大多数环境中，使用它是安全的

这充分利用了：

  • ：使用flexbox行为显示此元素
  • 沿容器主轴将内部元件居中对齐
  • 确保内部元件自动包裹在容器内（不要从容器中断裂）
注意：与HTML和CSS一样，这只是获得所需结果的多种方法之一。在选择适合您的规格的方法之前，请仔细研究

.container{
显示器：flex；
证明内容：中心；
柔性包装：包装；
宽度：70%；
背景：#eee；
利润率：10px自动；
位置：相对位置；
文本对齐：居中；
}
.街区{
背景：绿色；
高度：100px；
宽度：100px；
利润率：10px；
}

1.公司名称
2.公司名称
3.公司名称
4.公司名称
5.公司名称
6.公司名称
7.公司名称
8.公司名称
如果更改
元素上的样式，请将
块
元素改为：左，则使用
显示：内联块
，然后可以将
文本对齐：居中
添加到
容器



.container{
高度：300px；
宽度：70%；
背景：#EEE；
利润率：10px自动；
位置：相对位置；
文本对齐：居中
}
.街区{
背景：绿色；
高度：100px；
宽度：100px；
利润率：10px；
显示：内联块；
}



1.公司名称
2.公司名称
3.公司名称
4.公司名称
5.公司名称
6.公司名称
7.公司名称
8.公司名称


1.公司名称
2.公司名称
3.公司名称
4.公司名称
5.公司名称
6.公司名称
7.公司名称
8.公司名称



试试这个div“
”
，基本上你的CSS需要这些更改


.container{text align:center；}
.block{display:inline block；*display:inline；zoom:1；垂直对齐：top；}


制作CSS

要将底部平铺与左侧对齐，需要一些javascript。由于向后兼容性，以下工程无处不在，包括IE8+；为了简化和IE7兼容性，强烈建议使用jQuery：


if（！window.addEventListener）{
window.addEventListener=函数（类型、侦听器、useCapture）{
attachEvent（'on'+类型，函数（）{
监听器（事件）；
});
};
}
window.addEventListener（'load'，makePaddings，false）；
addEventListener（'resize'，makePaddings，false）；
函数makePaddings（）{
var container=document.querySelector（'.container'）；
var blocks=document.querySelectorAll（'.block'）；
var br=[]，
最大值=0，
i=0；
var top=块[0]。getBoundingClientRect（）.top；
while（blocks[i]&&blocks[i].getBoundingClientRect（）.top==top）{
i++；
}
var show=blocks.length%i？i-blocks.length%i:0；/*需要多少填充*/
var paddings=document.querySelectorAll（'.padding'）；
如果（paddings.length


现在您可以使用属性作为布局的基础。这将允许您对子元素进行更多的控制



.container{
宽度：70%；
背景：#EEE；
利润率：10px自动；
位置：相对位置；
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.街区{
背景：绿色；
高度：100px；
宽度：100px；
利润率：10px；
}



1.公司名称
2.公司名称
3.公司名称
4.公司名称
5.公司名称
6.公司名称
7.公司名称
8.公司名称



.container{
背景：浅灰色；
高度：自动；
宽度：70%；
利润率：10px自动；
位置：相对位置；
显示器：flex；
柔性包装：包装；
证明内容：周围的空间；
}
.街区{
背景：绿色；
高度：100px；
宽度：100px；
利润率：10px；
}



1.公司名称
2.公司名称
3.公司名称
4.公司名称
5.公司名称
6.公司名称
7.公司名称
8.公司名称

使用内联样式确实是一种糟糕的做法，我知道这一点，但仅举一个例子。直接在元素上声明的CSS和在样式表中声明的CSS之间没有比较。每一种都有它的好处。我想，如果我把屏幕缩小，盒子就完美地居中了，但是如果我把它缩小了

<body>

<div class="container">
       <div style="width:78%; margin:0 auto;">
        <div class="block">1. name of the company</div>
        <div class="block">2. name of the company</div>
        <div class="block">3. name of the company</div>
        <div class="block">4. name of the company</div>
        <div class="block">5. name of the company</div>
        <div class="block">6. name of the company</div>
        <div class="block">7. name of the company</div>
        <div class="block">8. name of the company</div>
    </div>
</div>
</body>