0

我试图让我的元素集中在一个像 www.spookycraft.net 这样的块中，但我无法弄清楚。我的代码：http: //jsfiddle.net/7PP9K/1/

原始代码：

<! DOCTYPE HTML>
<html>
<head>
<meta charset='UTF-8'>
<title> Wandercraft Network </title>

<style media="screen" type="text/css">

.slide-up-boxes a{
display:block;
width:300px;
height:300px;
background: #eee;
border: 1px solid #ccc;
overflow:hidden;
}

.slide-up-boxes h5{
height:300px;
width:300px;
text-align:center;
line-height:150px; 
-webkit-transition: margin-top 0.3s linear ;
background-color:#white;
}

.slide-up-boxes a:hover h5{
margin-top:-300px;

}

.slide-up-boxes div{
text-align:center;
height:300px;
width:300px;
opacity:0;
background-color:orange;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.2s linear ;
}

.slide-up-boxes a:hover div{
-webkit-transform: rotate(0);
opacity:1;
}

.slide-up-boxes{
 margin:auto;
}




</style>

</head>

<body>


<div id="page-wrap">

<section class="slide-up-boxes">

<a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/PVP.png">
<div> 
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
 </div>
</a>

</div>

<section class="slide-up-boxes">
<a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Kingdoms.png">
<div> 
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
 </div>
</a>

<section class="slide-up-boxes">
<a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Survival.png">
<div> 
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
 </div>
</a>

<section class="slide-up-boxes">
<a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Factions.png">
<div> 
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
 </div>
</a>
</div>
</body>

</html>

如果我找到答案，我会更新这篇文章谢谢你的阅读。

4

4 回答 4

0

居中定位块元素的技巧是

margin: 0 auto;

只需将其添加到您的锚 css (.slide-up-boxes a) 或您想要居中的任何元素中，它应该可以工作。确保它也有固定的宽度。

于 2013-06-14T01:52:14.903 回答
0

给父级一个固定的宽度，并通过自动边距将其居中：

#page-wrap {
    width:300px;
    margin:0 auto;
}

Fiddle sample

于 2013-06-14T01:52:24.003 回答
0

我已经更新了你的 jsfiddle。

我已经关闭了这些部分并添加了一些 CSS 以允许与 spookycraft 网站相同的演示文稿。

看看这个：

http://jsfiddle.net/7PP9K/4/

关键变化：

body{
    width:960px;
}

#page-wrap{
    width:620px;
    margin:0 auto;
}
.slide-up-boxes {
    margin:5px;
    width:300px;
    float:left;
}

编辑：错误的 jsfiddle 链接，现已更新

于 2013-06-14T01:56:24.377 回答
0 
CSS :

.slide-up-boxes a {
    float:left;             // changes made
    display:block;
    width:300px;
    height:300px;
    background: #eee;
    border: 1px solid #ccc;
    overflow:hidden;
}
#page-wrap{
    width:620px;
    margin:0 auto;
}
body{
    width:1200px;
}

演示

于 2013-06-14T04:55:19.550 回答