1

小提琴包含在这里

下面的代码是相关代码的示例，一切都在小提琴中。

HTML

<body>
<div id="wrapper" >
    <header>
        <div class="hwrapper">
        <div class="box effect2">
            <img src="media/header1.jpg" width="150px" height="150px" style="padding-top:5px;" />               
        </div>
        <div class="box effect2">
            <img src="media/header2.jpg" width="150px" height="150px" style="padding-top:5px;" />               
        </div>
        <div class="box effect2">
            <img src="media/header3.jpg" width="150px" height="150px" style="padding-top:5px;" />               
        </div>
        <div class="box effect2">
            <img src="media/header4.jpg" width="150px" height="150px" style="padding-top:5px;" />               
        </div>
        <div class="box effect2">
            <img src="media/header5.jpg" width="150px" height="150px" style="padding-top:5px;" />               
        </div>
        </div>
    </header>

CSS

    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;
}

好的，所以我制作了一排漂亮的图片，沿着我的页面顶部运行，并具有整洁的页面卷曲效果。问题是到目前为止它不会以我的其余内容为中心。它停留在左边，这是由于 .box 中的 float:left css 规则。

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

我的图片行周围有一个 .hwrapper div 类，用于设置规则以使所有内容居中，同时将 float:left 保持在 .box 中，但我的中间对齐技巧都不起作用。我不确定冲突在哪里，也许在我的 page curl css 中？

提前致谢。

4

2 回答 2

2

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

不过，要解决此问题，您可以简单地将 设置.hwrapper为display:inline-block，强制其宽度与其子项的大小相同。

.hwrapper {
    display: inline-block;
}

jsFiddle 示例- 它有效。

这有效地居中.hwrapper，因为您已经text-align:center设置了父元素，在本例中为body.

于 2013-11-02T17:40:57.423 回答
1

如果您需要在居中的标题中居中图像，那么您需要调整一些东西。

JSFiddle

.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;
}
于 2013-11-02T17:47:03.063 回答