Div 上的中心图像
[英]Centre Image over Div's
问题描述
我试图将这个图像放在一些 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">×</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>
请参阅图像以了解我希望骰子图像在屏幕上的位置。
理想情况下，我希望它具有响应性，以便无论视口大小如何，它都保持在同一位置。
谢谢
1 个解决方案
解决方案1
0 2019-11-29 20:16:20
尝试这个..
我已将以下部分添加到您的 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">×</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>
解决方案2
0 2019-11-29 20:29:52
除了发布的第一个答案之外，这是另一种使用额外div元素和margin: auto; 。 我还为您的浮动添加了一个明确的元素，以便父div具有适当的高度。 试试下面的代码片段。
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; } .hold { position: relative; } #dice { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .clear { clear: both; }
<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">×</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='hold'> <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='clear'></div> </div> <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>
如何在 div 中垂直和水平居中文本，同时围绕大小可以变化的图像流动
[英]How to centre text vertically AND horizontally in a div whilst also flowing around an image who's size can vary
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.