重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

【GOLF me!】初月無料お試し

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

A 回答 (5件)

オバケイ さん


 ・・・・・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>
    • good
    • 0

こんにちは



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

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

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

あのですね。

コーディングというのは後々にも続くわけです。横並びにしたいという意味であればこうなりますね
<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;がよければそっちでもいいんじゃないの
    • good
    • 0

フレックスボックスにすれば中のdivが横並びになり様々な配置ができますよ



フレックスボックス
https://developer.mozilla.org/ja/docs/Web/CSS/CS …
    • good
    • 0

説明があまり詳しく書けてないのだけど画像を中央に持ってくるというのなら、全体をdivで囲ってcssでmargin:auto;でも画像は中央にくる。


しかし説明からするとmarginで中央に持っていきたいのか、それともdivにfloatで浮かせたいのかはっきりしない。もう少しやりたいことを書いて下ださい
この回答への補足あり
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!