Question

我正试图让我的元素集中在一个像这样的块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>

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

Answer 1

中心定位块元素的技巧是

margin: 0 auto;

只需将其添加到你的主播css（.slide-up-boxes a）或你想要居中的任何元素，它应该工作。确保它也有固定的宽度。

Answer 2

为父级提供固定宽度并以自动边距为中心：

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

Fiddle sample

Answer 3

我已经更新了你的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链接，现已更新

Answer 4

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

DEMO

定位问题CSS

4 个答案: