2017-06-16 53 views

回答

1

更新CSS和HTML在row添加一個類text-center並從div.polaroidfloat:right,這就是爲什麼你的圖像框對齊到正確請更新CSS部分,就像下面拿到盒子的中心。

工作小提琴還包括

fiddle link

img { 
 
    max-width: 100%; 
 
} 
 

 
div.polaroid { 
 
    width: 150px; 
 
    height: 150px; 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
    text-align: center; 
 
    margin-top: 5px; 
 
    margin-left: 5px; 
 
    float: none; 
 
    display: inline-block; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 

 
div.polaroid img { 
 
    height: 100px; 
 
} 
 

 
div.containerq { 
 
    padding: 10px; 
 
}
<body dir="rtl"> 
 
    <div class="container-fluid"> 
 
    <div class="row text-center"> 
 
     <div class="visible-xs col-xs-12"> 
 
     <a href="index3.php?id=9"> 
 
      <div class="polaroid"> 
 
      <img src="http://anubis.ir/logo.jpg" alt="Norway" style="width:100%"> 
 
      <div class="containerq">1</div> 
 
      </div> 
 
     </a> 
 
     <a href="index3.php?id=9"> 
 
      <div class="polaroid"> 
 
      <img src="http://anubis.ir/logo.jpg" alt="Norway" style="width:100%"> 
 
      <div class="containerq">2</div> 
 
      </div> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>