Question

我希望将图像文本放在一边。我有两段。首先它是中间对齐的，接下来它是我想要的第一段。我想要回应。我该怎么办？

＆＃13;

.circular-portrait {
      position: relative;
      width: 30vw;
      height: 30vw;
      overflow: hidden;
      border-radius: 50%;
      margin: 0 auto 25px;
      
    }
    
    .circular-portrait img {
      width: 100%;
      height:100%;
      object-fit: cover;
    }

＆＃13;

<div class="circular-portrait-product-page">
         <img class="circular-portrait-product-page" src="https://lh5.ggpht.com/ly6G6lUNHjWKvLgeHO0-ilg7zkEXc-hCWP0Q94gdyCeejWNoDMw6h5buM0pFO0mSDKQ=w300" />
     </div>

＆＃13;

Answer 1

喜欢这个？

 <div class="circular-portrait-product-page">
     <img class="circular-portrait-product-page" src="https://lh5.ggpht.com/ly6G6lUNHjWKvLgeHO0-ilg7zkEXc-hCWP0Q94gdyCeejWNoDMw6h5buM0pFO0mSDKQ=w300" />
     <p>
          Here is some text
     </p>
</div>

添加到css：

P{ 
    position:absolute;
    z-index:2;
    top:30vw;
    left:30vw;
}

工作示例：

＆＃13;

.circular-portrait {
  position: absolute;
  width: 30vw;
  height: 30vw;
  overflow: hidden;
  border-radius: 50%;
  margin: 0 auto 25px;

}

.circular-portrait img {
  width: 100%;
  height:100%;
  object-fit: cover;
}
P{
  position:absolute;
  z-index:2;
  top:15vw;
  left:15vw;
}

＆＃13;

 <div class="circular-portrait-product-page">
     <img class="circular-portrait-product-page" src="https://lh5.ggpht.com/ly6G6lUNHjWKvLgeHO0-ilg7zkEXc-hCWP0Q94gdyCeejWNoDMw6h5buM0pFO0mSDKQ=w300" />
     <p>
     Here is some text
     </p>
 </div>

＆＃13;

除了文本到圆形图像

1 个答案: