원형 이미지 옆에있는 텍스트

Question

중간에 이미지를 정렬하고 싶습니다. 두 단락이 있습니다. 우선 중간에 정렬되고 다음은 정확하게 첫 번째 단락 아래에 있어야합니다. 나는 반응이 좋고 싶다. 내가 무엇을 할 수 있을지?

이 같이

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

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

작동 예 :

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