div事件中带有div的项目在JS事件后移动

Question

我遇到一些CSS样式问题。

首先，请原谅不良的样式-我已经整理出游戏的逻辑，现在正在研究样式

游戏是石头剪刀布的简单游戏。每当我单击一个正方形（代表剪刀石头）时，游戏逻辑就会运行，您或计算机玩家都会得到一个分数。一旦两个玩家的分数都更新，带有div stripe的项目就会在div中上移。

我不确定这是html / css问题还是JS问题-但我想要的是stripe div项始终保持居中状态。

我提供的图片向您展示了我的意思-我确定我所说的使所有人感到困惑。

欢呼

代码：

body {
  margin: 0;
  font-family: "Montserrat", "Avenir";
}

#header {
  line-height: 1.1;
  text-align: center;
  margin: 0;
  font-weight: normal;
  text-transform: uppercase;
}

#stripe {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  height: 50px;
}

#reset {
  width: 5%;
}

#message {
  display: inline-block;
  width: 10%;
}

#yourScore {
  display: inline-block;
  width: 2%;
}

#compScore {
  display: inline-block;
  width: 2%;
}

.option {
  width: 30%;
  background: steelblue;
  padding-bottom: 30%;
  float: left;
  margin: 1.66%;
  border-radius: 25px;
  transition: background .5s;
  -webkit-transition: .5s;
  -moz-transition: .5s;
}

#buttons {
  margin: 20px auto;
  max-width: 600px;
}

<div id="header">
  <h1>Rock Paper Scissors</h1>
</div>

<div id="stripe">
  <button id="reset">Reset</button>
  <span id="message"><p></p></span>
  <span id="yourScore" data-value="0"><p>0</p></span>
  <span id="compScore" data-value="0"><p>0</p></span>
</div>

<div id="buttons">
  <div id="rock" class="option">rock</div>
  <div id="paper" class="option">paper</div>
  <div id="scissors" class="option">scissors</div>
</div>

Answer 1

As mentioned in the comments, you are probably loosing the ps when updating the inner html of #message #yourScore and #compScore.

I would suggest you remove all the ps from within the stripe and change the stying to add some top/bottom paddings:

#stripe {
  text-align: center;
  width: 100%;
  padding: 15px 0;
}