Aside text to circular image

我想把圖像文字對齊中間。我有兩段。首先它是中間對齊的，下一個就是我想要在第一段之下。我想要有迴應。我能做什麼？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

回答

相關問題