Aside text to circular image

2017-01-30 76 views 0 likes

我想把图像文字对齐中间。我有两段。首先它是中间对齐的，下一个就是我想要在第一段之下。我想要有回应。我能做什么？Aside text to circular image

.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; 
 
    }

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

来源

2017-01-30 Mant1944

哪些文本？你已经尝试过了吗？你应该提供更多的代码，包括“臭名昭着的文本”;） –

回答

喜欢这个？

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

工作例如：

.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; 
 
}

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

来源

2017-01-30 09:52:17

Aside text to circular image

回答

相关问题