写真ギャラリーを中央に一列に浮かべて作る

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のようなものはありませんです。親divにtext-align: center cssを追加するだけで、すべてが中央に配置されます。

編集

あなたは画像の行を中心に探しているなら、私はフレックスボックスを使用してお勧めしたい

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>