Home > OS >  Why wont my button center in a div? The button is in a wrapper that has text-align:center
Why wont my button center in a div? The button is in a wrapper that has text-align:center

Time：07-02

I can't seem to figure out why my button won't center!

I have a button that appears when you click on a div element

This button is just a "Collect loot" button but for some reason, it won't center itself!

I wrapped the button in a <p style="text-align:center> type deal yet the button still wont center itself!

.btnwrapcenter {
  text-align: center;
}
<p >
  <button  id="CollectLootButton">Collect</button>
</p>

Here is a codepen link for better investigation: https://codepen.io/jonloft/pen/rNdaQjG

CodePudding user response：

Set the display of the button to inline which is set to block in your js code

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

Full code:

// 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" >Hearth Idle</h1>
</header>

<div >
  <div >
    <div  style="border:1px solid gray">
      <p id="enemy_stats_text_id"  style="text-align:center;">Enemy Stats</p>
    </div>
    <div  style="border:1px solid gray">

      <div id="battle_enemy_loader_container_id" >
        <div  id="battle_enemy_loader_id">
        </div>
      </div>

      <p id="SelectZoneBeforeTextId"  style="text-align:center;">
        Select a zone first!
      </p>
      <h2 id="EnemyNameText" ></h2>
      <progress id="EnemyHealthBarId"  data-label='20/20' value="20" max="20">

        </progress>

    </div>
    <div  style="border:1px solid gray">
      <h3 id="CollectLootText" >Loot (0/10)</h3>
      <p >
        <button  id="CollectLootButton">Collect</button>
      </p>
    </div>
    <br>
  </div>
  <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  style="border:1px solid gray">
    <div >
      <div  style="border:1px solid gray">
        <div  data-label="10/10">
          <span  style="width:100%;"></span>
        </div>
        <br>
        <p id="Player1DamageInfoText">Damage: 2</p>
      </div>
      <div  style="border:1px solid gray">
        <h2 id="BattleInfoUsernameText" >Tank</h2>
      </div>
      <div  style="border:1px solid gray">
        <div  data-label="10/10">
          <span  style="width:100%;"></span>
        </div>
      </div>
    </div>

    <div >
      <div  style="border:1px solid gray">
        <div  data-label="10/10">
          <span  style="width:100%;"></span>
        </div>
        <br>
        <p id="Player2HealingInfoText">Healing: 1</p>
      </div>
      <div  style="border:1px solid gray">
        <h2 id="BattleInfoUsernameText" >Healer</h2>
      </div>
      <div  style="border:1px solid gray">
        <div  data-label="10/10">
          <span  style="width:100%;"></span>
        </div>
      </div>
    </div>

    <div >
      <div  style="border:1px solid gray">
        <div  data-label="10/10">
          <span  style="width:100%;"></span>
        </div>
        <br>
        <p id="Player3DamageInfoText">Damage: 1</p>
      </div>
      <div  style="border:1px solid gray">
        <h2 id="BattleInfoUsernameText" >DPS</h2>
      </div>
      <div  style="border:1px solid gray">
        <div  data-label="10/10">
          <span  style="width:100%;"></span>
        </div>
      </div>
    </div>

  </div>
</div>

CodePudding user response：

.btnwrapcenter{
margin:0px;
      position: absolute;
      top: 50%;
      left:50%;
      
      }
<p >
<button  id="CollectLootButton">Collect</button>
</p>

You can try this to center your div button

Page link：https//www.codepudding.com/os/461265.html

Prev:Hide disabled button using css
Next:Trying to process json file returned from an API call in NodeJS - error: undefined - why?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding