在圖像容器內創建一個帶有居中文本內容的css響應圓圈

我需要創建一個帶有居中文本的圓。該圓圈必須位於圖像全寬度容器內。 HTML應該是這樣的：在圖像容器內創建一個帶有居中文本內容的css響應圓圈

<div class="class-img"> 
    <img src="static/img/class-home.png" class="img-responsive" alt=""> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-4"> 
       <div class="circle"> 
        <div class="caption-text"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

你能告訴我如何讓這個圈子和風格它是在容器中圖像的頂部中間？我使用的是引導3

這是什麼，我想創建一個快照：

來源

2016-11-09 Daniela Avendaño

所以你要圖片旁邊的圓圈......你能添加什麼是預期的快照 – Geeky

不知道這是否可以幫助你http://codepen.io/sahithiK/pen/qqOZZN – Geeky

我想要圖像中的圓圈 –

使用img-circle自舉獲得的圖像作爲圈

要創建一個圓圈使用本css

#circle { 
    width: 100px;     //Change values 
    height: 100px;     //Change values 
    background: red;    //Change color here 
    -moz-border-radius: 50px;  //Change values 
    -webkit-border-radius: 50px; //Change values 
    border-radius: 50px;  //Change values

}

來源

2016-11-09 06:22:19

我不需要一個圖像作爲圓形，但裏面有一個標題文字的圖像內的圓圈。 –

請參閱http://stackoverflow.com/questions/16615403/css-how-to-draw-circle-with-text-in-middle –

.class-img{ 
 

 

 
} 
 

 
img{height:500px;width:500px;} 
 
.container{ 
 
    position: absolute; 
 
    left: 200px; 
 
    top: 150px; 
 
    
 
} 
 

 
.circle{ 
 
    background:red; 
 
    
 
    width:150px; 
 
    height:150px; 
 
    border-top-left-radius:110px ; 
 
    border-top-right-radius:110px ; 
 
    border-bottom-right-radius:110px ; 
 
    border-bottom-left-radius:110px ; 
 
} 
 
.caption-text{ 
 
    text-align:center; 
 
    padding:50px; 
 
}

<div class="class-img"> 
 
    <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="img-responsive" alt=""> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-lg-4"> 
 
       <div class="circle"> 
 
        <div class="caption-text">hello</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

希望這有助於

來源

2016-11-09 23:34:16 Geeky

在圖像容器內創建一個帶有居中文本內容的css響應圓圈

回答

相關問題