試圖讓文本與重疊的圓形圖像重疊時的行爲引導

我有一個頁面，我想有一個圓形圖像的文本行上，他們可以作爲鏈接。我已經想出瞭如何讓它適用於全尺寸網頁的一般情況，但是當我調整頁面寬度時，文本不會與圖像一起縮放，因爲我必須使用絕對位置。這裏的HTML：試圖讓文本與重疊的圓形圖像重疊時的行爲引導

<!DOCTYPE html> 
<html> 

    <head> 

     <link rel="stylesheet" href="bootstrap.min.css"> 
     <link rel="stylesheet" href="main.css"> 
    </head> 


    <body> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-3"> 
        <a class= href=""> 
         <img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" /> 
         <div class="button-caption">Button</div> 
        </a> 
       </div> 

       <div class="col-md-3"> 
        <a class= href=""> 
         <img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" /> 
         <div class="button-caption">Button</div> 
        </a> 
       </div> 

       <div class="col-md-3"> 
        <a class= href=""> 
         <img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" /> 
         <div class="button-caption">Button</div> 
        </a> 
       </div> 

       <div class="col-md-3"> 
        <a class= href=""> 
         <img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" /> 
         <div class="button-caption">Button</div> 
        </a> 
       </div> 
      </div> 

     </div> 

    </body> 

</html>

這裏的main.css的網頁...

body { 
    max-width: 900px; 
    margin: 0 auto; 
} 

.container { 
    width: 100%; 
} 

.button-pic { 
    opacity: 0.4; 
    position: relative; 
} 

.button-caption { 
    text-align: center; 
    position: absolute; 
    top: 87px; 
    left: 85px; 
}

我想找到一種方法，不用設置頂部和按鈕標題的左邊位置因爲不是我所有的標籤都是相同的長度。任何人有建議提供？

來源

2015-12-29 Pat S

你們是不是要在圖像的時刻中心放置文字？ – vanburen

理想情況下，是的。如果我刪除'left：85px;''text-align：center;'似乎沒有任何作用。 –

如果您希望文字位置與圖像保持一致，則需要使用百分比而不是爲位置設置固定數量的像素，因爲圖像是響應式的。

查看工作片段。

.content { 
 
    max-width: 900px; 
 
    margin: auto; 
 
} 
 
.button-pic { 
 
    opacity: 0.4; 
 
    position: relative; 
 
    margin: auto; 
 
} 
 
.button-caption { 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="content"> 
 

 
    <div class="container-fluid"> 
 

 
    <div class="row"> 
 
     <div class="col-md-3"> 
 
     <a href="#"> 
 
      <img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" /> 
 
      <span class="button-caption">Just a Button</span> 
 
     </a> 
 
     </div> 
 

 
     <div class="col-md-3"> 
 
     <a href="#"> 
 
      <img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" /> 
 
      <span class="button-caption">Button</span> 
 
     </a> 
 
     </div> 
 

 
     <div class="col-md-3"> 
 
     <a href="#"> 
 
      <img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" /> 
 
      <span class="button-caption">Just a Really Very Pretty Long Label for a Button</span> 
 
     </a> 
 
     </div> 
 

 
     <div class="col-md-3"> 
 
     <a href="#"> 
 
      <img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" /> 
 
      <span class="button-caption">A Button</span> 
 
     </a> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 

 
</div>

來源

2015-12-29 02:55:16 vanburen

謝謝你 - 這真棒。 –

沒問題，很高興我可以幫忙。 – vanburen

試圖讓文本與重疊的圓形圖像重疊時的行爲引導

回答

相關問題