时间戳

首页 > 解决方案 > 如何在部分标签中并排对齐图像和文本 div？

javascript - 如何在部分标签中并排对齐图像和文本 div？

问题描述

尽管屏幕大小，我需要这两个 div ，文本和图像并排。我希望它们彼此之间的距离相等。

div 并排对齐就好了。问题是当我进入桌面时，距离增加了，我该如何阻止它？

#welcome {
    display: flex;
    justify-content:center'
    align-items: center;
   }
  
  
  
  .flex-child:first-child {
    margin-right: 40px;
  }
<div>
  <section id="welcome" className="flex">
    <div className="welcome-text">
      <h2 className="mainTitle">Nutrition Integrated<br /><span>Data.</span><span>Insight.</span><span>Integrated.</span></h2>
      <p className="welcome-para">Get access to our huge range of credit and debit cards that allows you to send unlimited transactions without getting charged any fees!.</p>
      <button>Free Demo</button>
      <button>Sign Up    </button>
    </div>
    <div className="welcome-img">
      <img src={SI} alt="SI"></img>
    </div>
  </section>
</div>

标签： javascriptcssreactjs

解决方案

如果你想在所有屏幕尺寸下保持相同的距离，你可以这样做：

   #welcome {
    display: flex;
    justify-content: center;
    align-items: center;
   }
  
  .welcome-text {
    margin-right: 40px;
  }

40px它们将具有与所有屏幕尺寸相同的距离。

推荐阅读