Html 中心列表<；部门>；第页_Html_Css

Html 中心列表<；部门>；第页

html css

Html 中心列表<；部门>；第页,html,css,Html,Css,由于某些原因，我似乎无法在页面中居中显示此列表元素。它包含三个大小相等的盒子，我希望它们总是贴在中间正文{ 宽度：100%； } .盒子{ 显示：块；保证金：0自动； } .盒式集装箱{ 显示：块；保证金：0自动；边框：1px纯蓝色； } .全部{ 浮动：对；宽度：100px；高度：100px；背景：红色；保证金：10px 10px 10px 10px； } .清楚{ 明确：两者皆有； } 对于要水平居中的所有内容，应将其左边距和右边距设置为“自动”。为长方体容器指定宽度：

由于某些原因，我似乎无法在页面中居中显示此列表元素。它包含三个大小相等的盒子，我希望它们总是贴在中间

正文{
宽度：100%；
}
.盒子{
显示：块；
保证金：0自动；
}
.盒式集装箱{
显示：块；
保证金：0自动；
边框：1px纯蓝色；
}
.全部{
浮动：对；
宽度：100px；
高度：100px；
背景：红色；
保证金：10px 10px 10px 10px；
}
.清楚{
明确：两者皆有；
}

对于要水平居中的所有内容，应将其左边距和右边距设置为“自动”。

为长方体容器指定宽度：

CSS

这里的示例：

对于

边距：auto

，元素需要以某种方式指定宽度（通常通过

宽度

）。使事物自动缩放的常用解决方案是

display:inlineblock（尽管flexbox在受支持时更容易实现）：
.box容器{
显示：内联块；
文本对齐：左对齐；
}

然后给它的父对象text align:center。或者，宽度：300px
（可能需要稍微调整或删除空格）似乎可以在这里很好地工作；这取决于你的实际布局
body
不需要宽度：100%，顺便说一句。
从all
类的每个类中删除float:right
。这会导致箱子向右移动。使框容器
居中对齐（这将使它们居中），并将每个框的显示更改为内联块

 .box-container {
     display: block;
     margin: 0 auto;
     border: 1px solid blue;
     text-align: center;
 }

 .all {
     width: 100px;
     height: 100px;
     background: red;
     margin: 10px 10px 10px 10px;
     display: inline-block;
 }

尝试：
注:
内联块
在元素之间留下空白。若要删除此空间，请在同一行上写入元素，而不是在单独的行上写入它们
更改：
到
<div class="box-container">
        <div class="box1 all"></div><div class="box2 all"></div><div class="box3 all"></div>
</div>



试试这个，它可以完美地工作：
HTML
<body>
    <div class="box-container">
        <div class="box1 all"></div>
        <div class="box2 all"></div>
        <div class="box3 all"></div>
        <div class="clear"></div>
    </div>
</body>

写有margin:0 auto的那部分应该这样做…这将居中。盒子容器，而不是较小的盒子。您已将.all类中框的边距重新设置为固定的10px。
<div class="box-container">
        <div class="box1 all"></div><div class="box2 all"></div><div class="box3 all"></div>
</div>

<body>
    <div class="box-container">
        <div class="box1 all"></div>
        <div class="box2 all"></div>
        <div class="box3 all"></div>
        <div class="clear"></div>
    </div>
</body>

body {
    width: 100%;
}

.boxes {
    display: block;
    margin: 0 auto;
}

.box-container {
    display: block;
    margin: 0 auto;
    border: 1px solid blue;
}

.all {
    background: none repeat scroll 0 0 red;
    float: right;
    height: 100px;
    margin-right: 13%;
    width: 100px;
}

.clear {
    clear: both;
}