如何设置图像垂直对齐但水平对齐？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何设置图像垂直对齐但水平对齐？相关的知识，希望对你有一定的参考价值。
我需要设置一个如下所示的欢迎部分：
我仅为图像设置了绝对位置，但是我无法使图像与另一列保持水平对齐。有什么想法吗？
我的代码：
.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>以上是关于如何设置图像垂直对齐但水平对齐？的主要内容，如果未能解决你的问题，请参考以下文章
如何左对齐和垂直对齐标题中的图像并将文本水平保持在div的中心[重复]