div内p与h2标签同行布局问题：标题无法与按钮居中对齐

这个问题我太熟悉了——你遇到的是float元素脱离文档流导致的布局偏移问题。咱们先搞清楚原因，再给你最靠谱的解决方案：

问题根源 #

你给.headerp添加了float:left，这个元素就会脱离正常的文档流，不再占据父容器的“标准空间”。而你的h2.logo是display:inline，它的居中是基于父容器剩余的可用宽度计算的——左边被float的p占了位置，h2的实际可用空间变小，自然就会向右偏移，没法和下方的button保持对齐。

最优解决方案：用Flexbox重构Header布局 #

Flexbox是现代CSS布局的首选，能轻松实现这种“左对齐元素+居中元素”的需求，而且布局稳定，兼容性也覆盖绝大多数浏览器。

修改后的完整代码如下：

HTML（无需改动，保持原样）

<body>
  <div class="header">
    <p class="headerp">Name</p>
    <h2 class="logo">Title</h2>
  </div>
  <button>Button</button>
</body>

修改后的CSS

body {
  font-family: 'Oswald', sans-serif;
  text-align: center;
  background-color: #dcecf1;
  margin: 0;
  padding: 0;
}

.header {
  /* 核心：将容器改为弹性布局 */
  display: flex;
  justify-content: center; /* 让子元素整体水平居中 */
  align-items: center; /* 子元素垂直居中对齐 */
  background-color: #292929;
  padding: 20px;
  margin-bottom: 40px;
  box-shadow: 3px 10px 23px -9px rgba(0,0,0,0.67);
}

.header h2 {
  color: #d4d4d4;
  padding: 12px;
  text-decoration: none;
  font-size: 20px;
  line-height: 25px;
  border-radius: 4px;
}

.header h2.logo {
  font-size: 50px;
  font-weight: bold;
  padding: 30px;
  /* 移除之前的display:inline和margin:auto，Flex会自动处理居中 */
}

.headerp {
  font-family: 'Poly', serif; /* 补全你之前遗漏的逗号 */
  color: #d3d3d3;
  margin-right: auto; /* 把p标签推到容器最左侧 */
  /* 移除原有的float:left和display:inline-block */
}

为什么这样改？ #

• display:flex将header转为弹性容器，所有子元素（p和h2）变为弹性项，布局规则由Flexbox统一控制。
• justify-content:center让弹性项整体水平居中，但给.headerp添加margin-right:auto会自动将它挤到容器最左侧，剩余空间全部留给h2，确保h2完美居中，和下方button对齐。
• align-items:center还能让p和h2在垂直方向自动对齐，视觉上更协调美观。

如果你坚持要用float的旧方法（不推荐），可以给header添加clearfix伪元素，同时把h2改为display:block并设置margin:0 auto，但这种方法容易引发其他布局问题，远不如Flexbox简洁可靠。

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