要素が幅50%と幅70%が混在するレイアウトにおいての中央寄せの方法について

Question

お世話になります。

以下のようなコードでレイアウトをしています。

<div>
   <article class="w50"><img src="img1.jpg"></article>
   <article class="w50"><img src="img2.jpg"></article>
   <article class="w70"><img src="img3.jpg"></article>
   <article class="w50"><img src="img4.jpg"></article>
   <article class="w50"><img src="img5.jpg"></article>
   <article class="w50"><img src="img6.jpg"></article>
   （以下w50とw70はランダムに続きます）
</div>

img{height:auto; max-width:100%; }

article{float:left;}

.w50{width:50%;}

.w70{width:70%;}

この場合だと3番目と6番目のarticleが左寄りに配置されますが、
これを中央に配置する方法を教えていただけませんでしょうか。

大変初歩的なことだと思うのですが、どうも解決できません・・・。
よろしくお願いいたします。

Answer 1

flexとか。

img {
  max-width: 100%;
}
div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
article {
  text-align: center;
  background-color: azure;
}
```**動くサンプル：**[https://jsfiddle.net/hwt7v64m/](https://jsfiddle.net/hwt7v64m/)

---

【これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス】
[http://www.webcreatorbox.com/tech/flexbox/](http://www.webcreatorbox.com/tech/flexbox/)

【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
[http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html](http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html)

【CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG】
[http://liginc.co.jp/web/html-css/css/21024](http://liginc.co.jp/web/html-css/css/21024)

Comments

[mikankkk]

ご回答ありがとうございます。
ご教授いただいたコードでイメージ通りのレイアウトになりました！
Flexboxというものを勉強してみます。

Answer 2

こちらの回答を参考にしてください。
HTMLでのセンタリング

Comments

[mikankkk]

ご回答いただきありがとうございます。
参考にしてみます