製作一個漂浮在中心的圖片庫

Question

我一直在試圖做一個簡單的圖庫，其中圖片漂浮在一行中，但在中心..對不起，我的英語不好。

但是我遵循w3s的例子，並嘗試使用我的標誌，但它從左到右浮動，我希望它儘可能居中，但連續有超過1張圖片。

這裏是我的CSS

div.img { 
    margin: 5px; 
    border: 1px solid #d60079; 
    float: left; 
    width: 180px; 
    } 

div.img:hover { 
    border: 2px solid #f0068a; 
} 

div.img img { 
    width: 100%; 
    height: auto; 
    float:center; 
} 

div.desc { 
    padding: 15px; 
    text-align: center; 
} 

和HTML

<div class="img"> 
    <a target="_blank" href="testlogo.png"> 
    <img src="test4.png" alt="Fjords" width="300" height="200"> 
    </a> 
    <div class="desc">Add a description of the image here</div> 
</div> 

<div class="img"> 
    <a target="_blank" href="testlogo.png"> 
    <img src="test4.png" alt="Fjords" width="300" height="200"> 
    </a> 
    <div class="desc">Add a description of the image here</div> 
</div> 
</div> 
</body> 

Answer 1

有作爲float: center沒有這樣的事情。只需將text-align: center css添加到父div，所有內容都將居中。

編輯

如果你正在尋找居中圖像的行，我建議使用柔性盒（見聯樣式）

html, body { 
 
    width: 100%; 
 
} 
 

 
div.img { 
 
    margin: 5px; 
 
    border: 1px solid #d60079; 
 
    width: 180px; 
 
    text-align: center 
 
    position: inline-block; 
 
    } 
 

 
div.img:hover { 
 
    border: 2px solid #f0068a; 
 
} 
 

 
div.img img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
div.desc { 
 
    padding: 15px; 
 
}

<div style="display: flex; justify-content: center"> 
 
    <div class="img"> 
 
     <a target="_blank" href="testlogo.png"> 
 
     <img src="http://placehold.it/350x150" alt="Fjords" width="300" height="200"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
    </div> 
 

 
    <div class="img"> 
 
     <a target="_blank" href="testlogo.png"> 
 
     <img src="http://placehold.it/350x150" alt="Fjords" width="300" height="200"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
    </div>