沿侧面图像垂直对齐文本

Question

我有一个 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;

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

Answer 1

我认为这应该可行

<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>

Answer 2

<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>

Answer 3

将您的图片和文字包裹在 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>

沿侧面图像垂直对齐文本

Vertical align text along side image

html

css

alignment

vertical-alignment

shopify