如何设置图像垂直对齐而左水平对齐？

Question

我需要设置一个欢迎部分，如下所示：

​

​

我只为图像设置了一个绝对位置，但我不能使图像与另一列保持水平对齐。有什么想法吗？

我的代码：

.img-welcome{
    position: absolute;
    top:10%;
    right: 0;
    bottom: 0;
    margin: auto;
    align-items: center;
    display: flex;
    height: max-content;
}

.container-relative{
    position: relative;
    height: 100%;
    padding-bottom: 50px;

}

<div className='welcome-container d-flex align-items-center'>
        <div className='container'>
         <div className='pt-5 text-left pb-5 container-relative'>
            <div class="col-6 pt-5  mb-5">
                <h1 class="mb-3 row h1-text-style">Combine all your credit cards in one place</h1>
                <h3 class="mb-5 row h3-text-style">We alow you to connect diferent bank cards, in one system, in which you will have the opportunity to manage to financial data and track the statistics of your costs.</h3>
                <a class="button-gradient" href="#">Get Started</a>
            </div>

        </div>
        </div>
         <div class="img-welcome">
             <img className='w-100' src={require('./img/img2.png')}></img>
         </div>
    </div>

Answer 1

您可以使用flexbox轻松实现这一点。

你只需要一个容器和两边：

​

body {
  background-image: linear-gradient(to right, #00b795 , #0092a2);
  height: 100vh;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
  display: flex;
  align-items: center;
}

.container > div {
  flex: 50%;
}

.left {
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  display: flex;
  flex-direction: column;
}

.right img {
  height: 80vh;
  width: 100%;
}

<div class="container">
  <div class="left">
    <strong>Combine all your credit cards in one place</strong>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum architecto repellendus deserunt ex quo impedit in blanditiis facere, nisi quos, excepturi doloribus fuga expedita amet.</p>
  </div>
  <div class="right">
    <img src="https://startbootstrap.com/assets/img/screenshots/themes/sb-admin-2.png">
  </div>
</div>

​