Html Div定心问题。比我想的更复杂

小提琴被控制住了

下面的代码是相关代码的示例，一切都在掌握之中

HTML

好的，我在我的页面顶部画了一排漂亮的图片，带有整齐的卷曲效果。问题是，到目前为止，它不会以我的其他内容为中心。它保持在左侧，这是由于.box中的float:left css规则造成的

如果我去掉float:left，图片行会变成一列，沿着页面向下延伸，而不是一个漂亮的水平行

我有一个.hwraper div类围绕我的图片行设置规则，使所有内容居中，同时保持浮动：保留在.box中，但我的中间对齐技巧都不起作用。我不确定冲突在哪里，也许在我的页面中

---

提前感谢。

float:middle不是有效属性-我删除了它

但要解决这个问题，您可以简单地将

.hwraper

设置为

显示：内联块

，强制其宽度与其子块大小相同

.hwrapper {
    display: inline-block;
}

-有效

---

这将有效地居中

.hwraper

，因为您在父元素上设置了

文本对齐：居中

，在这种情况下是

主体

如果您需要将图像居中放置在居中的标题中，则需要调整几项

---

没有“float:middle”这样的属性`<代码>浮动：中间让我的日子过得愉快：哈哈！非常感谢。很有道理。@mateikav很高兴它起了作用！

    body {
    text-align: center;
    margin:0;
    padding:0;
    background-image:url('../media/background.gif');
    background-repeat: repeat;
}

#wrapper {

}

header {
    width:100%;
    height:300px;
    -webkit-box-shadow: inset 0px -3px 5px rgba(50, 50, 50, 0.4);
    -moz-box-shadow: inset 0px -3px 5px rgba(50, 50, 50, 0.4);
    box-shadow: inset 0px -3px 5px rgba(50, 50, 50, 0.4);

}

/*---------header images--------*/

.hwrapper {

}

.box {
    width:160px;
    height:160px;
    background:#FFF;
    margin-top:20px;
    margin-bottom:20px;
    margin-left:20px;
    margin-right:20px;
    float: left;
}

.effect2 {
  position: relative;
}

.effect2:before, .effect2:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 14px;
  left: 5px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-7deg);
  -moz-transform: rotate(-7deg);
  -o-transform: rotate(-7deg);
  -ms-transform: rotate(-7deg);
  transform: rotate(-7deg);
}

.effect2:after {
  -webkit-transform: rotate(7deg);
  -moz-transform: rotate(7deg);
  -o-transform: rotate(7deg);
  -ms-transform: rotate(7deg);
  transform: rotate(7deg);
  right: 5px;
  left: auto;
}

.hwrapper {
    display: inline-block;
}

.hwrapper {
display:inline-block;
text-align:center;
}

.box {
    width:160px;
    height:160px;
    background:#FFF;
    margin-top:20px;
    margin-bottom:20px;
    margin-left:20px;
    margin-right:20px;
    display:inline-block;
}