如何使垂直浮动元素居中，元素缩放问题，img 元素大小问题答案

【问题标题】：How to center vertically floated elements, problems with elements scaling, img elements size problems如何使垂直浮动元素居中，元素缩放问题，img 元素大小问题
【发布时间】：2017-01-16 23:59:28
【问题描述】：

我正在尝试制作一个简单的游戏，但遇到了一些我似乎无法解决的问题：

我无法居中垂直浮动元素（.stat 和 .clickable）。
所有元素的总高度应该完全符合屏幕高度，但它会超出它。
图像的宽度会有所不同，具体取决于我给它们的值（在我的屏幕上，它们在 32% 或 29% 时看起来相同，但在 30% 时，上方的图像稍微宽一些（而且有点模糊）边框）。
img 元素的高度属性无效。

这是我的代码（图片为 450 像素宽的正方形）：

* {
  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) 而不是浮动来使它们“在同一行”。

标签： html css responsive-design

【解决方案1】：

我不知道你的第一个问题是什么意思。但是，我可以帮助您解决第二个问题。我对您的代码做了一些小的更改，但我没有图像。看看下面的代码。游戏容器现在设置为 max-height: 100%;和高度：100vh；这应该会有所帮助。（100vh 表示孔页。我还制作了 body overflow: hidden;，因为我认为不需要滚动。我将按钮容器制作到了页面底部。

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  background-color: #e6e6e6;
  overflow:hidden;
}
.statsBar,
.buttons {
  color: #333333;
  font-family: Impact, Charcoal, sans-serif;
  text-transform: uppercase;
  background-color: #bfbfbf;
  height: 13%;
}
.buttons {
  bottom: 0;
  clear:both;
}
#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%;
  max-height: 100%;
  height: 100vh;
  text-align: center;
  margin: auto;
  background-color: #999999;
}
img {
  height: 50%;
  display: block;
  margin: auto;
}
#enemyHand {
  transform: rotate(180deg);
  margin-top: 5%;
}
#playerHand {
  margin-bottom: 5%;
}

对于第三个问题，我们没有图片... 对于高度属性尝试显示：块；然后没有宽度。检查你的分类正常它应该工作。

希望对你有帮助！！！

【讨论】：

【解决方案2】：

在这种情况下，您可以利用 flexbox（请注意，滚动是由 sn-p 的视口 height 生成的，理想情况下它甚至不会溢出，但如果溢出，则设置 overflow: auto 只是为了处理它，您可以根据自己的利益发表评论）：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
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%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
}
.hands {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* comment if content will never overflow */
  overflow-x: auto;
}
.buttons {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
.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;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
}
img {
  width: 32%;
  display: block;
  margin: auto;
}
/*#score {
  float: left;
  margin-left: 5%;
}*/

/*#hp {
  float: right;
  margin-right: 5%;
}*/

/*.stats:after {
  content: "";
  display: block;
  clear: both;
}*/

/*#enemyHand {
  transform: rotate(180deg);
  margin-top: 5%;
}*/

/*#playerHand {
  margin-bottom: 5%;
}*/

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

【讨论】：

【解决方案3】：

请检查此代码。我解决了您的问题 1 和 2。我不了解您的图像问题。

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  background-color: #e6e6e6;
}
.statsBar,
.buttons {
  display: table;
  color: #333333;
  font-family: Impact, Charcoal, sans-serif;
  text-transform: uppercase;
  background-color: #bfbfbf;
  height: 13%;
  width: 100%;
}
#score,
#hp{
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
}
#score {
  /*float: left;
  margin-left: 5%;*/
  text-align: left;
}
#hp {
  /*float: right;
  margin-right: 5%;*/
  text-align: right;
}
.stats:after {
  content: "";
  display: block;
  clear: both;
}
.clickable {
  /*float: left;*/ /*Float sould not use here */
  display: table-cell;
  width: 29.33%;
  /*margin: 1%;
  padding: 1%;*/
  border: 5px solid #bfbfbf;
  vertical-align: middle;
  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="http://placehold.it/450x450">
      <img id="playerHand" src="http://placehold.it/450x450">
    </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>

【讨论】：