图片与文本水平排列时被容器裁切，如何解决？

问题根源 #

你遇到的问题主要来自几个细节错误和布局逻辑问题：

• HTML容器类名拼写错误（seacrh应为search），导致CSS的.container样式完全没生效
• float:center是无效属性，CSS浮动仅支持left/right/none
• 容器padding写了01.5em，属于语法错误，正确写法是1.5em
• 原居中方式（position+transform）未适配内容高度，加上<h2>默认块级布局，导致图片被容器裁切

最优解决方案：Flex布局实现水平对齐 #

Flex是现代布局方案，能轻松实现文本与图片的水平/垂直居中，同时避免裁切问题。

修正后的HTML代码

<div class="container search">
  <h2> Meal app by Garvit <img class="image" src="heading.jpg" width="150" height="150"></h2>

  <input type="text" placeholder="Type A NOM NOM Dish.." class="inputBox" />
  <button class="inputBtn">Search</button>
</div>

修正后的CSS代码

body {
  margin: 0;
  min-height: 100vh;
  /* 用Flex实现页面整体居中，替代原position+transform方案，避免内容裁切 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(105deg, #f2eeee, #0808d4);
}

.container {
  text-align: justify;
  background: linear-gradient(55deg, #940ce9, #a88bc9);
  font-size: 16px;
  padding: 1.5em 1.8em;
  width: 90vw;
  max-width: 100em;
  border-radius: 0.6em;
}

/* 给h2设置Flex布局，实现文本与图片水平对齐 */
.search h2 {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 1em; /* 控制文本与图片的间距 */
  margin: 0 0 1.5em 0; /* 与下方搜索栏拉开距离 */
}

.image {
  border-radius: 50%;
  /* 补全border属性，原写法仅指定颜色，无宽度和样式 */
  border: 3px solid #1e4bdd;
}

备选方案：浮动实现对齐 #

如果偏好使用浮动，需注意清除浮动并预留足够空间：

.search h2 {
  overflow: hidden; /* 清除浮动，让h2包裹图片 */
  line-height: 150px; /* 让文本与图片高度垂直居中 */
  margin-bottom: 1.5em;
}

.image {
  border-radius: 50%;
  border: 3px solid #1e4bdd;
  float: right;
  margin-left: 1em;
}

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