为什么我的按钮不能在 div 中居中？ 该按钮位于具有 text-align:center 的包装器中

Question

我似乎无法弄清楚为什么我的按钮不会居中

当您单击div元素时，我有一个按钮

这个按钮只是一个“收集战利品”按钮，但由于某种原因，它不会自行居中

我将按钮包装在 <p class="wrapper" style="text-align:center> 类型的交易中，但按钮仍然不会自行居中

 .btnwrapcenter { text-align: center; }

 <p class="btnwrapcenter"> <button class="enemybattlevisibility" id="CollectLootButton">Collect</button> </p>

这是一个用于更好调查的 codepen 链接： https://codepen.io/jonloft/pen/rNdaQjG

Answer 1

将按钮的显示设置为inline ，在您的js代码中设置为block

 document.getElementById("CollectLootButton").style.display = "inline";

---

完整代码：

 // The variables. tankhealth = 10, healerhealth = 10, dpshealth = 10, tankdamage = 5, healerdamage = 1, dpsdamage = 0.5, tankattackspeed = 2500, healerattackspeed = 5000, dpsattackspeed = 1500, enemyhealthvalue = 20, enemyhealthmaxvalue = 20, enemydamage = 1, enemyattackspeed = 3, currentzone = 0, refreshtankattackinterval = 0, lootamount = 0 var ElwynnForestEnemyArray = ['Kobold', 'Murloc', 'Wolf', 'Bear', 'Spider']; function tankattackenemy() { var enemyhealthprogressbar = document.getElementById("EnemyHealthBarId"); console.log(enemyhealthprogressbar); var enemyattackinterval = setInterval(() => { if (enemyhealthvalue > 0) { enemyhealthvalue -= tankdamage; } console.log(enemyhealthvalue); enemyhealthprogressbar.setAttribute("value", enemyhealthvalue); enemyhealthprogressbar.setAttribute("max", enemyhealthmaxvalue); enemyhealthprogressbar.setAttribute("data-label", enemyhealthvalue + "/" + enemyhealthmaxvalue); if (enemyhealthvalue == 0) { selectelwynnforestzone(); clearInterval(enemyattackinterval); enemyhealthprogressbar.setAttribute("value", enemyhealthvalue); enemyhealthprogressbar.setAttribute("max", enemyhealthmaxvalue); enemyhealthprogressbar.setAttribute("data-label", enemyhealthvalue + "/" + enemyhealthmaxvalue); if (lootamount < 10) { lootamount += 1; document.getElementById("CollectLootText").innerHTML = "Loot (" + lootamount + "/" + "10" + ")" } } }, tankattackspeed); } function dpsattackenemy() { } function healerhealplayer() { } function selectelwynnforestzone() { var currentzone = 1; const randomelwynnenemy = Math.floor(Math.random() * ElwynnForestEnemyArray.length); console.log(randomelwynnenemy, ElwynnForestEnemyArray[randomelwynnenemy]); document.getElementById("EnemyNameText").innerHTML = ElwynnForestEnemyArray[randomelwynnenemy]; document.getElementById("battle_enemy_loader_container_id").style.display = "block"; document.getElementById("SelectZoneBeforeTextId").style.display = "none"; //Kobold if (randomelwynnenemy == 0) { enemyhealthvalue = 20; enemyhealthmaxvalue = 20; } //Murloc if (randomelwynnenemy == 1) { enemyhealthvalue = 20; enemyhealthmaxvalue = 20; } //Wolf if (randomelwynnenemy == 2) { enemyhealthvalue = 20; enemyhealthmaxvalue = 20; } //Bear if (randomelwynnenemy == 3) { enemyhealthvalue = 20; enemyhealthmaxvalue = 20; } //Spider if (randomelwynnenemy == 4) { enemyhealthvalue = 20; enemyhealthmaxvalue = 20; } setTimeout(() => { const enemybattleloadertimer = document.getElementById("battle_enemy_loader_id") enemybattleloadertimer.style.display = "none"; document.getElementById("enemy_stats_text_id").style.display = "block"; document.getElementById("EnemyNameText").style.display = "block"; document.getElementById("EnemyHealthBarId").style.display = "block"; document.getElementById("CollectLootText").style.display = "block"; /* modified line of the code */ document.getElementById("CollectLootButton").style.display = "inline"; }, 700); tankattackenemy(); }

 body { margin: 0; padding: 0; } #battle_enemy_loader_container_id { text-align: center; vertical-align: center; }.battle_enemy_loader { border: 10px solid #f3f3f3; border-top: 10px solid #3498db; border-radius: 50%; width: 2em; height: 2em; animation: spin 2s linear infinite; display: inline-block; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }.textwrapcenter { text-align: center; }.btnwrapcenter { text-align: center; } progress { text-align: center; }.progressbarwrapcenter { text-align: center; } #CollectLootText { text-align: center; }.party_container { width: 100%; display: flex; position: relative; min-height: 8em; }.Player1HealthBar { height: 1.5em; width: 100%; background-color: #c9c9c9; position: relative; font-weight: bold; float: left; }.Player1HealthBar:before { content: attr(data-label); font-size: 1em; position: absolute; text-align: center; top: 5px; left: 0; right: 0; }.Player1HealthBar.value { background-color: #05a000; display: inline-block; height: 100%; }.Player1ManaBar { height: 1.5em; width: 100%; background-color: #c9c9c9; position: relative; font-weight: bold; float: right; }.Player1ManaBar:before { content: attr(data-label); font-size: 1em; position: absolute; text-align: center; top: 5px; left: 0; right: 0; }.Player1ManaBar.value { background-color: #1663be; display: inline-block; height: 100%; }.Player2HealthBar { height: 1.5em; width: 100%; background-color: #c9c9c9; position: relative; font-weight: bold; float: left; }.Player2HealthBar:before { content: attr(data-label); font-size: 1em; position: absolute; text-align: center; top: 5px; left: 0; right: 0; }.Player2HealthBar.value { background-color: #05a000; display: inline-block; height: 100%; }.Player2ManaBar { height: 1.5em; width: 100%; background-color: #c9c9c9; position: relative; font-weight: bold; float: right; }.Player2ManaBar:before { content: attr(data-label); font-size: 1em; position: absolute; text-align: center; top: 5px; left: 0; right: 0; }.Player2ManaBar.value { background-color: #1663be; display: inline-block; height: 100%; }.Player3HealthBar { height: 1.5em; width: 100%; background-color: #c9c9c9; position: relative; font-weight: bold; float: left; }.Player3HealthBar:before { content: attr(data-label); font-size: 1em; position: absolute; text-align: center; top: 5px; left: 0; right: 0; }.Player3HealthBar.value { background-color: #05a000; display: inline-block; height: 100%; }.Player3ManaBar { height: 1.5em; width: 100%; background-color: #c9c9c9; position: relative; font-weight: bold; float: right; }.Player3ManaBar:before { content: attr(data-label); font-size: 1em; position: absolute; text-align: center; top: 5px; left: 0; right: 0; }.Player3ManaBar.value { background-color: #1663be; display: inline-block; height: 100%; }.EnemyHealthBar { height: 1em; width: 100%; background-color: #c9c9c9; position: relative; font-weight: bold; float: left; }.EnemyHealthBar:before { content: attr(data-label); font-size: 0.8em; position: absolute; text-align: center; top: 15%; left: 0; right: 0; }.EnemyHealthBar.value { background-color: #05a000; display: inline-block; height: 100%; }.main_battle_div { display: flex; }.player1_battle_info_div { width: 33.3%; float: left; flex: 1; }.player1_battle_info_left_div { position: relative; width: 33.3%; float: left; height: 100%; }.player1_battle_info_center_div { position: relative; width: 33.3%; float: left; height: 100%; }.player1_battle_info_right_div { position: relative; width: 31.9%; float: left; height: 100%; }.player2_battle_info_div { width: 33.3%; float: left; flex: 1; }.player2_battle_info_left_div { position: relative; width: 33.3%; float: left; height: 100%; }.player2_battle_info_center_div { position: relative; width: 33.3%; float: left; height: 100%; }.player2_battle_info_right_div { position: relative; width: 31.9%; float: left; height: 100%; }.player3_battle_info_div { width: 33.3%; float: left; flex: 1; }.player3_battle_info_left_div { position: relative; width: 33.3%; float: left; height: 100%; }.player3_battle_info_center_div { position: relative; width: 33.3%; float: left; height: 100%; }.player3_battle_info_right_div { position: relative; width: 31.9%; float: left; height: 100%; }.battle_enemy_div { width: 33.3%; float: left; flex: 1; }.battle_enemy_left_div { float: left; position: relative; width: 33.3%; height: 100%; }.battle_enemy_center_div { float: left; position: relative; width: 33.3%; height: 100%; }.battle_enemy_right_div { float: left; position: relative; width: 31.9%; height: 100%; }.SelectZoneBeforeText { display: block; }.zone_selection_div { border: 1px solid gray; width: 33.3%; float: left; flex: 1; padding: 0.5em; }.party_container { bottom: 30px; position: absolute; }.enemybattlevisibility { display: none; } #ElwynnForestZoneBox { width: 6em; height: 2.5em; background-color: white; } #WestFallZoneBox { width: 6em; height: 2.5em; background-color: white; } p.clean { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 11; margin-bottom: 0; margin-top: 0px; } p.clean2 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 11; margin-bottom: 0; margin-top: 0px; } p.clean3 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 11; margin-bottom: 3px; margin-top: 0px; } p.console { font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace; font-size: 12; color: white; margin-top: 0; } p.consoleOld { font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace; font-size: 12; color: grey; margin-bottom: 0; }.button { border: 1px solid #1a1a1a; background: #666666; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc)); background: -webkit-linear-gradient(top, #ffffff, #888888); background: -moz-linear-gradient(top, #ffffff, #888888); background: -ms-linear-gradient(top, #ffffff, #888888); background: -o-linear-gradient(top, #ffffff, #888888); background-image: -ms-linear-gradient(top, #ffffff 0%, #888888 100%); padding: 12.5px 25px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0; -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0; box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0; text-shadow: #cccccc 0 1px 0; color: #000000; font-size: 16px; font-family: helvetica, serif; text-decoration: none; vertical-align: middle; outline: none; }.button:hover { border: 1px solid #898989; text-shadow: #d4d4d4 0 1px 0; background: #666666; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#666666)); background: -webkit-linear-gradient(top, #ffffff, #666666); background: -moz-linear-gradient(top, #ffffff, #666666); background: -ms-linear-gradient(top, #ffffff, #666666); background: -o-linear-gradient(top, #ffffff, #666666); background-image: -ms-linear-gradient(top, #ffffff 0%, #666666 100%); color: #000000; }.button:active { text-shadow: #bfbfbf 0 1px 0; border: 1px solid #2e2e2e; background: #d9d9d9; background: -webkit-gradient(linear, left top, left bottom, from(#595959), to(#616161)); background: -webkit-linear-gradient(top, #595959, #d9d9d9); background: -moz-linear-gradient(top, #595959, #d9d9d9); background: -ms-linear-gradient(top, #595959, #d9d9d9); background: -o-linear-gradient(top, #595959, #d9d9d9); background-image: -ms-linear-gradient(top, #595959 0%, #d9d9d9 100%); color: #000000; }.button:disabled { opacity: 0.6; border: 1px solid #ffffff; }.button2 { border: 1px solid #1a1a1a; background: #666666; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc)); background: -webkit-linear-gradient(top, #ffffff, #888888); background: -moz-linear-gradient(top, #ffffff, #888888); background: -ms-linear-gradient(top, #ffffff, #888888); background: -o-linear-gradient(top, #ffffff, #888888); background-image: -ms-linear-gradient(top, #ffffff 0%, #888888 100%); padding: 2px 4px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0; -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0; box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0; text-shadow: #cccccc 0 1px 0; color: #000000; font-size: 11px; font-family: helvetica, serif; text-decoration: none; vertical-align: middle; outline: none; }.button2:hover { border: 1px solid #898989; text-shadow: #d4d4d4 0 1px 0; background: #616161; background: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#888888)); background: -webkit-linear-gradient(top, #f7f7f7, #888888); background: -moz-linear-gradient(top, #f7f7f7, #888888); background: -ms-linear-gradient(top, #f7f7f7, #888888); background: -o-linear-gradient(top, #f7f7f7, #888888); background-image: -ms-linear-gradient(top, #f7f7f7 0%, #888888 100%); color: #000000; }.button2:active { text-shadow: #bfbfbf 0 1px 0; border: 1px solid #2e2e2e; background: #d9d9d9; background: -webkit-gradient(linear, left top, left bottom, from(#595959), to(#616161)); background: -webkit-linear-gradient(top, #595959, #d9d9d9); background: -moz-linear-gradient(top, #595959, #d9d9d9); background: -ms-linear-gradient(top, #595959, #d9d9d9); background: -o-linear-gradient(top, #595959, #d9d9d9); background-image: -ms-linear-gradient(top, #595959 0%, #d9d9d9 100%); color: #444444; }.button2:disabled { opacity: 0.6; border: 1px solid #ffffff; }

 <header> <h1 id="GameTitleText" class="textwrapcenter">Hearth Idle</h1> </header> <div class="main_battle_div"> <div class="battle_enemy_div"> <div class="battle_enemy_left_div" style="border:1px solid gray"> <p id="enemy_stats_text_id" class="enemybattlevisibility" style="text-align:center;">Enemy Stats</p> </div> <div class="battle_enemy_center_div" style="border:1px solid gray"> <div id="battle_enemy_loader_container_id" class="enemybattlevisibility"> <div class="battle_enemy_loader" id="battle_enemy_loader_id"> </div> </div> <p id="SelectZoneBeforeTextId" class="SelectZoneBeforeText" style="text-align:center;"> Select a zone first: </p> <h2 id="EnemyNameText" class="textwrapcenter enemybattlevisibility"></h2> <progress id="EnemyHealthBarId" class="EnemyHealthBar enemybattlevisibility" data-label='20/20' value="20" max="20"> </progress> </div> <div class="battle_enemy_right_div" style="border:1px solid gray"> <h3 id="CollectLootText" class="enemybattlevisibility">Loot (0/10)</h3> <p class="btnwrapcenter"> <button class="enemybattlevisibility" id="CollectLootButton">Collect</button> </p> </div> <br> </div> <div class="zone_selection_div"> <div id="ElwynnForestZoneBox" style="border;1px solid gray: cursor;pointer:" onclick="selectelwynnforestzone()"> <p style="font-size.0;8em:text-align;center:margin:auto">Elwynn Forest<br>(0-10)</p> </div> <br> <div id="WestFallZoneBox" style="border;1px solid gray: cursor;pointer:" onclick="selectwestfallzone()"> <p style="font-size.0;8em:text-align;center:margin;auto:">West Fall<br>(10-20)</p> </div> </div> <div class="party_container" style="border:1px solid gray"> <div class="player1_battle_info_div"> <div class="player1_battle_info_left_div" style="border:1px solid gray"> <div class="Player1HealthBar" data-label="10/10"> <span class="value" style="width;100%:"></span> </div> <br> <p id="Player1DamageInfoText">Damage: 2</p> </div> <div class="player1_battle_info_center_div" style="border:1px solid gray"> <h2 id="BattleInfoUsernameText" class="textwrapcenter">Tank</h2> </div> <div class="player1_battle_info_right_div" style="border:1px solid gray"> <div class="Player1ManaBar" data-label="10/10"> <span class="value" style="width;100%:"></span> </div> </div> </div> <div class="player2_battle_info_div"> <div class="player2_battle_info_left_div" style="border:1px solid gray"> <div class="Player2HealthBar" data-label="10/10"> <span class="value" style="width;100%:"></span> </div> <br> <p id="Player2HealingInfoText">Healing: 1</p> </div> <div class="player2_battle_info_center_div" style="border:1px solid gray"> <h2 id="BattleInfoUsernameText" class="textwrapcenter">Healer</h2> </div> <div class="player2_battle_info_right_div" style="border:1px solid gray"> <div class="Player2ManaBar" data-label="10/10"> <span class="value" style="width;100%:"></span> </div> </div> </div> <div class="player3_battle_info_div"> <div class="player3_battle_info_left_div" style="border:1px solid gray"> <div class="Player3HealthBar" data-label="10/10"> <span class="value" style="width;100%:"></span> </div> <br> <p id="Player3DamageInfoText">Damage: 1</p> </div> <div class="player3_battle_info_center_div" style="border:1px solid gray"> <h2 id="BattleInfoUsernameText" class="textwrapcenter">DPS</h2> </div> <div class="player3_battle_info_right_div" style="border:1px solid gray"> <div class="Player3ManaBar" data-label="10/10"> <span class="value" style="width;100% "></span> </div> </div> </div> </div> </div>

Answer 2

 .btnwrapcenter{ margin:0px; position: absolute; top: 50%; left:50%; }

 <p class="btnwrapcenter"> <button class="enemybattlevisibility" id="CollectLootButton">Collect</button> </p>

你可以试试这个让你的 div 按钮居中