おしえて

div要素と横並び

解決済

質問者：オバケイ
質問日時：2021/09/29 16:36
回答数：5件

htmlとcssについての質問です。div要素とdiv要素を横に並べて、画面の中央に表示させたいのですが、どのようにCSSを表示すればいいですか？

<div class="abc">
　<div class="def">
　　1
　</div>
　<div class="ghi">
　　2
　</div>
</div>

「1 2」のように画面中央に表示したいです。

No.1の回答に寄せられた補足コメントです。補足日時：2021/09/29 16:52
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： gura_
回答日時：2021/09/30 10:08

オバケイ　さん

　･････div要素とdiv要素を横に並べて、画面の中央に････････

例えば↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
body{ margin:0; }
.abc{ height:100vh; display:flex; justify-content:center; align-items:center;}
.abc div{ background:#eee; width:22%; height:30%; margin:20px; display:flex; justify-content:center; align-items:center; }
</style>
</head>
<body>
<div class="abc">
<div class="def">
1
</div>
<div class="ghi">
2
</div>
</div>
</body>
</html>

- 0
- 件

通報する

No.4

回答者： fujillin
回答日時：2021/09/29 18:22

こんにちは

すでに回答が出ていますが・・・

CSSで
.abc{ display: flex; justify-content: center; }
としておけば、ひとまず中央寄せの横並びになります。

間隔等を調整したければ、marginやpaddingなどで。

- 0
- 件

通報する

No.3

回答者：友愛韓日
回答日時：2021/09/29 17:02

あのですね。

コーディングというのは後々にも続くわけです。横並びにしたいという意味であればこうなりますね
<div id="wrap">
<div id="s1">
<p class="m1"><img src="画像ファイル" width="200px" height="200px"></p>
<p class="m1"><img src="画像ファイル" width="200px" height="200px"></p>
</div>
</div>
*css*

#wrap{
width:700px;
height:700px;
margin:auto;
}

.m1{
float:left;
margin-left:10px;
}

ちなみにdispley:inline;がよければそっちでもいいんじゃないの