试图让文本与重叠的圆形图像重叠时的行为引导

我有一个页面，我想有一个圆形图像的文本行上，他们可以作为链接。我已经想出了如何让它适用于全尺寸网页的一般情况，但是当我调整页面宽度时，文本不会与图像一起缩放，因为我必须使用绝对位置。这里的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

试图让文本与重叠的圆形图像重叠时的行为引导

回答

相关问题