0

この www.spookycraft.net のように要素を 1 つのブロックの中央に配置しようとしていますが、それを理解することができませんでした。私のコード: 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 の Web サイトと同じ表示を可能にしました。

これを見てください：

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 に答える