如何使文本和图像处于同一水平？答案

【问题标题】：How can I make text and image be on the same level?如何使文本和图像处于同一水平？
【发布时间】：2022-10-19 23:10:17
【问题描述】：

我试图使文本和图像处于同一水平，但是当我添加图像移动的文本时，我不确定如何修复它并寻求帮助。

我想过尝试 flexbox，但我认为这行不通？

CurrentLooks

相关代码：

HTML：

 <div class="ProjectBox">

   <div>
     <h1>test</h1>
   </div>
   
   <div>
   <img src="Commands.png" alt="Bot commands" style="width: 270px " class="IMG2"/> 
   </div>
 </div>

CSS：

.OuterPage {
  margin: 70px;
}

.ProjectBox {
  width: 600px;
  height: 500px;
  background: #fa3f32;
  border: #fa3f32;
}

.Flex1 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  gap: 50px;
}

.IMG2 {
  position:relative; 
  left: 300px;
  top: 40px;
}```

【问题讨论】：

目前尚不清楚您所说的“相同级别”是什么意思。如果您的意思是在同一高度对齐，那么您有多种解决方案。您可以创建grid layout 或flexbox layout，也可以使用absolute 定位来防止元素以其自己的尺寸/位置相互影响。

标签： html css image flexbox

【解决方案1】：

如果您使用引导程序，请尝试使用 row 和 inline-block 将它们对齐在一起

<div class="ProjectBox row">
       <div class="d-inline-block">
         <h1>test</h1>
       </div>
       <div class="d-inline-block">
       <img src="Commands.png" alt="Bot commands" style="width: 270px " /> 
       </div>
     </div>

如果是纯css，可以用

<div style="display:inline-block "class="ProjectBox ">
   <div style="display:inline-block">
     <h1>test</h1>
   </div>
   <div style="display:inline-block">
   <img src="Commands.png" alt="Bot commands" style="width: 270px " /> 
   </div>
 </div>

【讨论】：

【解决方案2】：

尝试将 position: relative; 添加到您的 .ProjectBox 类和 position:absolute; + top: 0; 到你的 .IMG2 类

【讨论】：

广泛作为答案。它也会导致元素的碰撞，因为图像将被移出流动