CSS设置body为flex居中内容时打乱文本对齐如何解决

解决方案 #

1. HTML结构调整

先将所有内容包裹在统一的父容器中，拆分文本区域和图片区域，避免直接操作body布局影响内部元素对齐：

<!DOCTYPE html>
<html>
<head>
    <link href="firstproject.css" rel="stylesheet">
</head>
<body>
<!-- 新增外层卡片容器，作为整体居中的单位 -->
<div class="card-container">
    <!-- 左侧文本区域 -->
    <div class="text-wrapper">
        <h1 id="main-heading">Get <span id="insights">insights</span> that help<br>
        your business grow.  </h1>
        <p id="para">Discover the benefits of data analytics and make<br>
        better decisions regarding revenue, customer<br>
        experience, and overall efficiency.</p>
        <div id="stats">
            <div id="companies"><span>10k+</span><br><span id="comp">companies</span></div>
            <div id="templates"><span>314</span><br><span id="temp">templates</span></div>
            <div id="queries"><span>12M+</span><br><span id="que">queries</span></div>
        </div>
    </div>
    <!-- 右侧图片区域 -->
    <div id="image">
        <img id="main-image" src="image-header-desktop.jpg" alt="main_image.jpg">
    </div>
</div>
</body>
</html>

2. CSS样式修改

仅对body设置外层居中规则，内部对齐逻辑保留原有设置，同时补充卡片布局和图片遮罩样式：

@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");

body {
  background-color: hsl(233, 47%, 7%);
  font-size: 15px;
  /* 新增：让body占满视口高度，居中外层卡片容器 */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
/* 新增外层卡片容器样式 */
.card-container {
  display: flex;
  width: 1110px;
  background-color: hsl(244, 38%, 16%);
  border-radius: 8px;
  overflow: hidden;
}
.text-wrapper {
  width: 50%;
  padding: 70px 70px 60px;
}
#main-heading {
  color: white;
  font-family: "Inter", sans-serif;
  font-size: 36px;
  margin: 0 0 25px 0;
}
#insights {
  color: hsl(277, 64%, 61%);
}
#para {
  color: hsla(0, 0%, 100%, 0.75);
  font-family: "Lexend Deca", sans-serif;
  font-weight: 400;
  line-height: 1.8;
  margin: 0;
}
#stats {
  font-size: 15px;
  display: flex;
  justify-content: flex-start;
  gap: 60px;
  margin-top: 70px;
}
#companies {
  color: white;
  text-align: left;
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: bolder;
  margin: 0;
}
#templates,
#queries {
  color: white;
  text-align: left;
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: bolder;
  margin: 0;
}
#que,
#temp,
#comp {
  color: hsla(0, 0%, 100%, 0.6);
  font-family: "Lexend Deca", sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 13px;
  display: block;
  margin-top: 6px;
}
#image {
  width: 50%;
  background-color: hsl(277, 64%, 61%);
}
#main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  mix-blend-mode: multiply;
}

核心实现逻辑

• body的flex规则仅作用于外层的.card-container容器，不会修改容器内部的文本左对齐属性，完全避免你提到的flex打乱原有排版的问题
• 外层容器内部用flex实现左文本右图片的并排布局，整体相对于页面垂直水平居中，和预期效果完全匹配
• 补充了图片紫色混合遮罩的样式，还原设计稿的视觉效果

优化建议

• 可以移除文本中的<br>标签，通过给文本容器设置固定宽度实现自动换行，适配不同尺寸的内容更灵活
• 建议将id选择器替换为类选择器，样式复用性更高，也可以避免id全局唯一的限制
• 统计项的间距可以用flex的gap属性替代单独的margin设置，代码更简洁易维护

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