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

Question

I need to set a welcome section like the following:

I have set an absolute position just for the image, but I cannot make the image keeps horizontally align with the other column. Any ideas?

My code:

.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

You can use flexbox to easily achieve this.

You just need a container and the two sides:

 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>