沿侧面图像垂直对齐文本

问题描述

我有一个Shopify商店，该商店有一个分为两半的页面，一侧是文本，另一侧是图像。我希望将文本定位为使其垂直位于图像的中间。这是我当前正在使用的代码：

<div class="image">
  </div>
<div class="textcontainer">
Some text which i would like centred
  </div> 

.image {
   width: 58%;
   padding-top: 60%;
   margin-right: 2%;
   position: relative;
   float: left;
   position: relative;
   background-image: url("https://cdn.shopify.com/s/files/1/0292/7217/8793/files/photo-1556760647-90d218f7ca5b.jpg?v=1589200183");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: 50% 50%;
 }

.textcontainer {
    width: 40%;
    position: relative;
    float: left;

有谁知道我该怎么做。非常感谢。

解决方法

将图像和文本包装在div .container中，并设置flex和align-item center的规则。

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

.image {
   width: 58%;
   padding-top: 60%;
   margin-right: 2%;
   position: relative;
   float: left;
   position: relative;
   background-image: url("https://cdn.shopify.com/s/files/1/0292/7217/8793/files/photo-1556760647-90d218f7ca5b.jpg?v=1589200183");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: 50% 50%;
 }
.textcontainer {
    width: 40%;
    position: relative;
    float: left;
 }

<div class="container">
  <div class="image">
    </div>
  <div class="textcontainer">
  Some text which i would like centred
    </div> 
</div> 

,

我认为这应该有效

<style>
.container {
    position: relative;
}

.textcontainer {
    position: absolute;
    top: 50%;
    left: 50%; // add this if you want it to horizontally align too
    transform: translateY(-50%); // use this for vertical align only
    transform: translate(-50% -50%) // use this for both vertical & horizontal align
}
</style>

<div class="container">
    <div class="image"></div>
    <div class="textcontainer">
        Some text which i would like centred
    </div> 
</div>

,

<style>
 .image-container{
     width: 300px;
     height: 300px;
     display: flex;
     align-items: center; //vertical center
     justify-content: center; //horizental center
 }
 .image-container img{
     width: 100%;
     height: auto;
 }
 .image-container p{
     position: absolute;
 }`enter code here`
</style>
<div class="image-container">
    <img src="https://fakeimg.pl/300/">
     <p>vertical text</p>
</div>