をどのように縦に浮かべ要素を中央に、スケーリングの要素を持つ問題サイズ:、IMG要素は、私は簡単なゲームを作るしようとしている、と私は私が解決するように見えることはできませんいくつかの問題に実行した問題
縦に浮かせた要素(
.stat
と.clickable
)を中央に置くことはできません。すべての要素の高さの合計は画面の高さに正確に収まる必要がありますが、それを超えています。
画像は値に応じて幅が少し異なります(私の画面では32%または29%で同じに見えますが、30%上の方がわずかに広い(そして少しぼやけています) )。
img要素のHeightプロパティは無効です。
は、ここで(画像は450px幅の正方形で)私のコードです:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
}
.statsBar,
.buttons {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
}
#score {
float: left;
margin-left: 5%;
}
#hp {
float: right;
margin-right: 5%;
}
.stats:after {
content: "";
display: block;
clear: both;
}
.clickable {
float: left;
width: 29.33%;
margin: 1%;
padding: 1%;
background: #f2f2f2;
}
.game {
width: 50%;
height: 100%;
text-align: center;
margin: auto;
background-color: #999999;
}
img {
width: 32%;
display: block;
margin: auto;
}
#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}
#playerHand {
margin-bottom: 5%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src='game.js'></script>
</head>
<body>
<div class="game">
<div class="statsBar">
<p id="score" class="stat">score: 0</p>
<p id="hp" class="stat">hp: 3</p>
</div>
<div class="hands">
<img id="enemyHand" src="paper.png">
<img id="playerHand" src="scissors.png">
</div>
<div class="buttons">
<a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a>
<a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a>
<a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a>
</div>
</div>
</body>
</html>
フローティングと心ではなく、相互に排他的です。要素を中央揃えにしたい場合は、浮動小数点の代わりにdisplay:inline(-block)を使用して、 "同じ行に"取得します。 – CBroe