[英]How to center text in the div horizontally with an image at left with vertical align middle
[英]How to set an image vertical align but align left horizontally?
我需要设置一个欢迎部分,如下所示:
我仅为图像设置了绝对 position,但我无法使图像与另一列水平对齐。 有任何想法吗?
我的代码:
.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>
您可以使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.