Div的中心图片

时间：2019-11-29 20:01:03

标签： html css bootstrap-4

我正在尝试将此图像置于某些div的中心。

无论我尝试什么，图像都几乎居中或卡在页面的右侧或左侧。

我尝试在Bootstrap网格系统中连续使用它，尝试使用flex，尝试更改position属性，但似乎对我没有任何帮助。

谢谢。

html,
body {
  font - family: 'Arimo', sans - serif;
  height: 100 % ;
  margin: 0;
  padding: 0;
}


.wrapper {
  position: relative;
  height: 95 % ;
}


/*buttons*/

.button1 {
  background - color: #0CCE6B;
    border: black 2px solid;
}

.button2 {
    background-color: white;
    border: black 2px solid;
}

.button3 {
    background-color: # 0 CCE6B;
  border: black 2 px solid;
}

/*Player panels*/

.playerOne,
.playerTwo {
  height: 100 % ;
  width: 50 % ;
  margin: 0;
  padding: 0;
}

.playerOne {
  float: left;
}

.playerTwo {
  background - color: white;
  float: right;
}

h1 {
  text - align: center;
  font - size: 4 rem;
  padding - top: 30 % ;
}

h2 {
  text - align: center;
  font - size: 4 rem;
  color: #EF2D56;
}

h3 {
  text - align: center;
  margin - top: 5 rem;
  font - size: 2 rem;
}

h4 {
  text - align: center;
  color: #EF2D56;
  font - size: 2 rem;

}

/*Images*/

img {
  width: 3 rem;
  height: 3 rem;
  position: absolute;
}

/*Help Modal*/

.helpModal {
  position: absolute;
}

#
modalHeader {
  color: black;
}

.modal - body {
    font - size: 1 rem;
    text - align: center;
    color: black;
  }

  /*change content dependant on active player or the winner*/

  .active {
    background - color: #0CCE6B;
}

.toggle {
    background-color: white;
}

# winner {
      position: absolute;
      width: 60 rem;
      height: 30 rem;
      visibility: hidden;
    }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Dice Game</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Arimo&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>

<body>

  <div class="wrapper">


    <div class="modalButton">
      <button type="button" class="btn helpModal" data-toggle="modal" data-target="#helpModal">
        <i class="fas fa-question-circle fa-5x"></i>
      </button>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <h2 id="modalHeader">Aim of the game</h2>
            <p><strong>Be the first player to reach a 100 global score.</strong></p>
            <ul style="list-style-type:square;">
              <li>This game has two players playing in rounds.</li>
              <li>On each turn a player rolls a dice as many times as they wish. Each roll adds to their round score
              </li>
              <li>If the player rolls a 1, they lost their round score. It is then the other players turn.</li>
              <li>The player can choose to hold. Which means that their round score is added to their global score.</li>
            </ul>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>



    <div class="playerOne active">
      <h1 id="name-0">PLAYER 1</h1>
      <h2 id="roundScore-0">0</h2>
      <h3>CURRENT SCORE</h3>
      <h4 id="score-0">0</h4>
    </div>


    <div class="playerTwo">
      <h1 id="name-1">PLAYER 2</h1>
      <h2 id="roundScore-1">0</h2>
      <h3>CURRENT SCORE</h3>
      <h4 id="score-1">0</h4>
    </div>


    <img src="images/dice-1.png" alt="dice" id='dice'>

    <div class="container-fluid buttonGroup">
      <div class="row text-center">
        <div class="col-4 button1">
          <button type="button" class="btn " id="newGame"><i class="fas fa-gamepad"></i> NEW GAME</button>
        </div>
        <div class="col-4  button2">
          <button type="button" class="btn" id="rollDice"><i class="fas fa-redo"></i>ROLL DICE</button>
        </div>
        <div class="col-4  button3">
          <button type="button" class="btn" id="hold"><i class="fas fa-hand-paper"></i>HOLD</button>
        </div>
      </div>
    </div>
  </div>




  <script src="index.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>
</body>

</html>

请查看我希望在屏幕上显示骰子图像的位置的图像。

理想情况下，我希望它具有响应性，以便无论查看端口的大小如何，它都可以保留在同一位置。

谢谢

Image 1

1 个答案:

答案 0 :(得分：0)

尝试一下。

我已将以下部分添加到您的CSS 

#dice {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}


html,
body {
    font-family: 'Arimo', sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
}


.wrapper {
    position: relative;
    height: 95%;
}


/*buttons*/

.button1 {
    background-color: #0CCE6B;
    border: black 2px solid;
}

.button2 {
    background-color: white;
    border: black 2px solid;
}

.button3 {
    background-color: #0CCE6B;
    border: black 2px solid;
}

/*Player panels*/

.playerOne,
.playerTwo {
    height: 100%;
    width: 50%;
    margin: 0;
    padding: 0;
}

.playerOne {
    float: left;
}

.playerTwo {
    background-color: white;
    float: right;
}

h1 {
    text-align: center;
    font-size: 4rem;
    padding-top: 30%;
}

h2 {
    text-align: center;
    font-size: 4rem;
    color: #EF2D56;
}

h3 {
    text-align: center;
    margin-top: 5rem;
    font-size: 2rem;
}

h4 {
    text-align: center;
    color: #EF2D56;
    font-size: 2rem;

}

/*Images*/

img {
    width: 3rem;
    height: 3rem;
    position: absolute;
}

/*Help Modal*/

.helpModal {
    position: absolute;
}

#modalHeader {
    color: black;
}

.modal-body {
    font-size: 1rem;
    text-align: center;
    color: black;
}

/*change content dependant on active player or the winner*/

.active {
    background-color: #0CCE6B;
}

.toggle {
    background-color: white;
}

#winner {
    position: absolute;
    width: 60rem;
    height: 30rem;
    visibility: hidden;
}

#dice {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Dice Game</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Arimo&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>

<body>

  <div class="wrapper">


    <div class="modalButton">
      <button type="button" class="btn helpModal" data-toggle="modal" data-target="#helpModal">
        <i class="fas fa-question-circle fa-5x"></i>
      </button>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel"
      aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <h2 id="modalHeader">Aim of the game</h2>
            <p><strong>Be the first player to reach a 100 global score.</strong></p>
            <ul style="list-style-type:square;">
              <li>This game has two players playing in rounds.</li>
              <li>On each turn a player rolls a dice as many times as they wish. Each roll adds to their round score
              </li>
              <li>If the player rolls a 1, they lost their round score. It is then the other players turn.</li>
              <li>The player can choose to hold. Which means that their round score is added to their global score.</li>
            </ul>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>



    <div class="playerOne active">
      <h1 id="name-0">PLAYER 1</h1>
      <h2 id="roundScore-0">0</h2>
      <h3>CURRENT SCORE</h3>
      <h4 id="score-0">0</h4>
    </div>


    <div class="playerTwo">
      <h1 id="name-1">PLAYER 2</h1>
      <h2 id="roundScore-1">0</h2>
      <h3>CURRENT SCORE</h3>
      <h4 id="score-1">0</h4>
    </div>


    <img src="https://via.placeholder.com/25" alt="dice" id='dice'>

    <div class="container-fluid buttonGroup">
      <div class="row text-center">
        <div class="col-4 button1">
          <button type="button" class="btn " id="newGame"><i class="fas fa-gamepad"></i> NEW GAME</button>
        </div>
        <div class="col-4  button2">
          <button type="button" class="btn" id="rollDice"><i class="fas fa-redo"></i>ROLL DICE</button>
        </div>
        <div class="col-4  button3">
          <button type="button" class="btn" id="hold"><i class="fas fa-hand-paper"></i>HOLD</button>
        </div>
      </div>
    </div>
  </div>




  <script src="index.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>
</body>

</html>

相关问题
最新问题