如何使用HTML和CSS实现参考图片所示的页面元素对齐效果

你可以通过Flex布局实现需求，以下是可直接使用的代码：

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 20px 5%;
}

.header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1100px;
}

.header-main a {
  text-decoration: none;
  color: #333;
  letter-spacing: 0.5px;
}

#toplica {
  font-size: 2.2rem;
  font-weight: bold;
  color: #ba4a1d; /* 可和图标配色统一，按需调整 */
}

.social-media {
  display: flex;
  gap: 18px;
  font-size: 22px;
}

补充说明：

• 上述代码实现的效果为：头部整体居中，主导航栏左右分别为ABOUT US和CONTACT，中间突出显示TOPLICA品牌名，下方社交媒体图标居中排列，和参考图布局逻辑一致
• 代码中的间距、字号、宽度、颜色数值均可根据实际设计要求修改，不影响整体布局逻辑
• 如需适配移动端，可添加媒体查询缩小字号、调整间距即可

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