设置text-align:center后容器内按钮无法居中是什么原因？

你给父容器写的text-align: center逻辑完全没问题，居中失效是因为按钮上的.enemybattlevisibility类写了float: left：
浮动元素会脱离普通文档流，父元素的文本对齐规则根本管不到浮动子元素，所以不管你给父类加多少遍居中属性，按钮都会钉在左边。

随便选一种就能解决：

• 改法1（改动最少）：给收集按钮清掉浮动
  给按钮加一行样式清浮动，父元素的文本居中马上生效：

  #CollectLootButton {
    float: none;
  }
  

• 改法2（更稳定，不用改按钮样式）：父容器改用flex居中
  直接改.btnwrapcenter的样式就行，不用动按钮原有代码：

  .btnwrapcenter {
    display: flex;
    justify-content: center;
  }
  

• 改法3：按钮自身用外边距居中
  给按钮设块级显示+左右自动外边距，同样要先清浮动：

  #CollectLootButton {
    float: none;
    display: block;
    margin: 0 auto;
  }
  

小提示：HTML规范里p标签是段落容器，不推荐嵌套块级元素，后面要是加复杂样式建议把这个p换成div，能少踩很多渲染bug。

内容的提问来源于stack exchange，提问作者Jon Loftus