沿侧面图像垂直对齐文本答案

【问题标题】：Vertical align text along side image沿侧面图像垂直对齐文本
【发布时间】：2020-08-22 17:31:53
【问题描述】：

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

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

【问题讨论】：

请添加更多代码
我已经编辑了代码
这样？ - ibb.co/jhxSMCY
是的，这很完美。那正是我想要的。 :)

标签： html css alignment shopify vertical-alignment

【解决方案1】：

将您的图像和文本包装在 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>

【讨论】：

【解决方案2】：

我认为这应该可行

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

【讨论】：

不幸的是没有运气
糟糕，图像类的 div 应该是

【解决方案3】：

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

【讨论】：