CSS布局问题：含PHP参数的ann-flex容器无法居中显示

核心问题分析 #

你的代码存在选择器不匹配的关键错误：HTML中容器用的是class="ann-flex"，但CSS里写的是#ann-flex（ID选择器），导致你设置的居中样式完全未生效。另外嵌套的.ann-item类会造成样式冲突，进一步影响布局效果。

修正方案 #

1. 调整HTML结构（避免类名冲突）

将内部嵌套的ann-item类改为更具体的名称，避免和外层容器的样式叠加：

<div class="ann-flex">
  <div class="ann-item" onclick="modal1f()">
    <div class="ann-item-header" id="modal1t">
      <h2><?php echo $akt1n;?></h2>
      <h5><?php echo $akt1t;?></h5>
    </div>
    <div id="modal1" class="modal">
      <div class="modal-content">
        <div id="ann1pdf"></div> 
      </div>
    </div>
  </div>
</div>

2. 修正并优化CSS样式

• 把选择器#ann-flex改为.ann-flex，匹配HTML的class
• 用Flex布局实现更可靠的水平居中
• 移除.ann-item中不必要的内边距，避免干扰居中效果：

.ann-flex {
    overflow: hidden;
    display: flex;
    justify-content: center; /* 水平居中子元素 */
    margin: 20px auto 0; /* 顶部间距+容器自身水平居中 */
    -ms-user-select: none;
    user-select: none;
}
.ann-item {
    width: 17em;
    background-color: white;
    border-radius: 20px;
    text-align: center;
}
.ann-item-header > h2 {
    font-size: larger;
    font-weight: normal; 
}
.ann-item-header > h5 {
    font-weight: normal; 
}
#ann1pdf,#ann2pdf,#ann3pdf {
    height: 400px;
    width: 100%;
}

备选方案（保留原text-align思路） #

如果坚持使用text-align: center实现居中，需确保.ann-flex设置宽度（比如width: 100%），同时修正选择器匹配问题，另外可以添加font-size: 0消除inline-block元素的默认空格间距：

.ann-flex {
    overflow: hidden;
    text-align: center;
    width: 100%;
    margin: 20px auto 0;
    -ms-user-select: none;
    user-select: none;
    font-size: 0; /* 消除inline-block间距 */
}
.ann-item {
    width: 17em;
    background-color: white;
    border-radius: 20px;
    text-align: center;
    display: inline-block;
    font-size: 16px; /* 恢复默认字体大小 */
}

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