3つのdivを合わせてセンタリングしたい

お世話になっております。

初心者の質問失礼します。

html
1<body>
2	<div align="center">
3	<div style="width: 200px;float: left">aaa</div>
4	<div style="width: 200px;float: left">bbb</div>
5	<div style="width: 200px;float: left">ccc</div>
6	</div>
7</body>

をセンタリングしたいのですが
どのようにするのかご教示願えないでしょうか？

二行目を
<div align="center">
やら
<div style="margin: 0 auto;">
やったのですがセンタリングしてくれないのです……

お忙しいところ大変申し訳ないのですが
上記ご助力頂けますようよろしくお願い申し上げます。

追記より

aaa bbb ccc

となっているものを

｜　　　　　aaa bbb ccc　　　　　｜

としたいと思っております。

yoshinavi

2018/01/22 03:40

最初のdivの定義（大きさ等）が不明な事と、入れ子の3つのdivを「センタリング」したいのは横に並べたものですか？それとも、縦に並べたものでしょうか？詳細に説明があるか、イメージ図等あれば、より良い回答が得れると思います。

moitaro

2018/01/22 03:48

申し訳ございません。３つのdivは横に並べたものでそれを外のdivでセンタリングしたいと思っております。

行動規範の内容に同意します

回答4件

例えばこうしてみては？

CSS
1.hoge{overflow:hidden;width:600px;margin:auto;}
2.hoge div{width: 200px;float: left;text-align:center;}
3.hoge1{background-Color:yellow;}
4.hoge2{background-Color:lime;}
5.hoge3{background-Color:aqua;}

HTML
1<div class="hoge">
2<div class="hoge1">aaa</div>
3<div class="hoge2">bbb</div>
4<div class="hoge3">ccc</div>
5</div>
6

投稿2018/01/22 03:11

yambejp

総合スコア114839

簡単には、以下のようにFlexboxを使って実装することができます。

html
1<div class="parent">
2    <div class="child">aaa</div>
3    <div class="child">bbb</div>
4    <div class="child">ccc</div>
5</div>

css
1.parent{
2    display: flex;
3    justify-content: center;/* 水平方向 */
4    align-items: center;/* 垂直方向 */
5}
6.child{
7    width: 200px;
8    flex: 1 1 auto;
9}