ボックスを中央配置したいです。

解決済

質問者：hayosato
質問日時：2023/09/19 17:09
回答数：2件

青みどりの全体の背景の上に薄いグレー色のボックスがあり、さらにそのボックスの上に３つボックスを配置するコードを書いているのですが、３つのボックスが均等に中央配置されず困っています。
一見PCのデバイス幅では中央配置に見えますが、デバイス幅を縮小するにつれて中央配置にならず、それが目立ってしまいます。３つのボックスを中央配置するにはどうしたらよいでしょうか？　

●HTMLのコード以下

<div class="zentai">

<div class="box">
<div class="box2">
<div class="title3">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ

</div>
</div>

<div class="box1"><div class="title2">入力フォーム内に以下の項目を記載して下さい。</div></div>
<div class="box2">
<div class="title5">テキストテキストテキストテキストテキストテキストテキストテキストテ</div>
</div>

<div class="box3">
</div>
</div>
</div>

●CSSのコード
.zentai{
background-color:#299CA4;
}

.box{
position: relative;
max-width: 1106px;
width: 88%;
height: auto;
margin-right: auto;
margin-left: auto;
margin-top: 100px;
margin-bottom: 80px;
padding: 10px 30px 16px 30px;
background-color: #f9f9f9;
color: #006666;
z-index: 1;
}

/*ボックス２*/
.box2{
position: relative;
display: inline-block;/*テキストと背景を同じ長さに*/
width: 94%;
height: auto;
margin-right: auto;
margin-left: auto;
margin-bottom: 30px;
padding-right: 20px;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 10px;
background-color: #d4ebeb;
border-radius: 0 12px 12px 12px;
z-index: 9999;
}

/*３つ目のボックス*/
.box3{
position: relative;
width: 94%;
height: auto;
margin-right: auto;
margin-left: auto;
margin-bottom: 16px;
padding-right: 20px;
padding-left: 20px;
padding-top: 12px;
padding-bottom: 10px;
background-color: #FFFFFF;
border-radius: 12px 12px 12px 12px;
border: 1.5px solid #ddd;
}

/* ボックス３の中にフォーム */
.auto-style15{
letter-spacing: -0.04em;
width: 90%;
max-width: 600px;
}

通報する

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

質問の本文を隠す

回答 (2件)

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

No.2ベストアンサー

回答者： gura_
回答日時：2023/09/20 23:21

hayosato さん

････３つのボックスが均等に中央配置されず困っています。･･････

原因は、width が content-box を規定しているのを忘れているため、その影響を受けている。↓
https://www.tohoho-web.com/css/prop/box-sizing.htm

.box1, .box2, .box3 に box-sizing: border-box; を指定すれば貴方の混乱の問題は解決するはず。

そういうことを含めて、このようなレイアウトは grid を使うことが便利でおすすめ。
参考↓
https://www.tohoho-web.com/css/prop/grid.htm

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<style>
.zentai{
background-color:#299CA4;
}

.box{
position: relative;
max-width: 1106px;
width: 88%;
height: auto;
margin: 100px auto 80px auto;
padding: 10px 30px 16px 30px;
background-color: #f9f9f9;
color: #006666;
z-index: 1;
display:grid; /* grid レイアウトで配置 */
grid: repeat(4,auto) / 94%; /* 4行と、94% の一列を指定 */
justify-content: center; /* 中央配置 */
}
/*ボックス２*/
.box2{
margin-bottom: 30px;
padding: 5px 20px 10px 20px;
background-color: #d4ebeb;
border-radius: 12px;
z-index: 9999;
}

/*ボックス１追記 */
.box1{
background-color: #dfc;
}
/*３つ目のボックス */
.box3{
margin-bottom: 16px;
padding: 12px 20px 10px 20px;
background-color: #FFFFFF;
border-radius: 12px;
border: 1.5px solid #ddd;
}

/* ボックス３の中にフォーム */
.auto-style15{
letter-spacing: -0.04em;
width: 90%;
max-width: 600px;
}
</style>
<body>
<div class="zentai">
<div class="box">
<div class="box2">
<div class="title3">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ</div>
</div>
<div class="box1">
<div class="title2">入力フォーム内に以下の項目を記載して下さい。</div>
</div>
<div class="box2">
<div class="title5">テキストテキストテキストテキストテキストテキストテキストテキストテ</div>
</div>
<div class="box3">3</div>
</div>
</div>
</body>
</html>