3つの水平に配置された画像をページに配置するにはどうすればよいですか？

Question

私は非常に単純なHTML/CSSウェブページを持っています。

私はそうのようなページに水平に配置された3枚の画像を、持っている：私はそうのように、ページ上でそれらを中央したい

を：

散策修正？ここで

は、私が現在使用している（いない加工）コードです：あなたのイメージが配置されるコンテナの適切な width設定し

.sketches { 
 
    align-content: center; 
 
} 
 
img { 
 
    border-radius: 50%; 
 
    border: 1px solid #000000; 
 
}

<div class="sketches"> 
 
    <img src="image1.jpg"> 
 
    <img src="image2.jpg"> 
 
    <img src="image3.jpg"> 
 
</div>

Answer 1

、その後margin-leftを設定し、 margin-right~自動

.sketches{ 
    width: 300px; 
    margin: 20px auto; 
} 

Answer 2

hereから垂直にセンタリングするための技術を使用し

.outer { 
 
    display: table; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.middle { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.sketches { 
 
    align-content: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
img { 
 
    border-radius: 50%; 
 
    border: 1px solid #000000; 
 
}

<div class="outer"> 
 
    <div class="middle"> 
 
    <div class="sketches" align=center> 
 
     <img src="image1.jpg"> 
 
     <img src="image2.jpg"> 
 
     <img src="image3.jpg"> 
 
    </div> 
 
    </div> 
 
</div>

：ここ

はソリューションです。デフォルトで<div>以来

Answer 3

はブロック要素ですしたい中央画像は水平に、それはのdivコンテナにtext-align: center;を設定するのに十分かどう<img>は、インラインブロック要素である：

.sketches { 
 
    text-align: center; 
 
} 
 

 
img { 
 
    border-radius: 50%; 
 
    border: 1px solid #000000; 
 
}

<div class="sketches"> 
 
     <img src="image1.jpg"> 
 
     <img src="image2.jpg"> 
 
     <img src="image3.jpg"> 
 
</div>

Answer 4

CSC

a）セレクタ

---

    1） display: flex;宣言
    2を挿入します）の代わりにCSSプロパティの： align-content justify-content

.sketches { 
 
display   : flex; 
 
justify-content : center; 
 
    
 
/* can be removed */ 
 
min-width : 350px; 
 
} 
 

 
img { 
 
border-radius: 50%; 
 
border: 1px solid #000000; 
 
}

<div class="sketches"> 
 
     <img src="image1.jpg"> 
 
     <img src="image2.jpg"> 
 
     <img src="image3.jpg"> 
 
</div>