スクロールボックスを中央に配置したいのですが上手くいきません。自分のコードは下にあります。試してみたこと。下記のURLを参考に https://h110.info/html_box_size/ ｃｓｓのスタイルシートに margin-left: auto; margin-right: auto; を追加してみても変化がありませんでした。何か私のやり方が間違っているのでしょうか？どうしたらよいでしょうか？途方に暮れています。ちなみにスクロールのつまみの色等はきちんと適応されています。画像も付属しておきます。ボックス内の文字一部消しています。 ○HTMLコード名前：利用規約 (以下「本サービス」といいます。)を提供するにあたり、以下の通り利用規約を定めます。なお、本サービスのユーザーは本規約に同意されたものとみなします。すべての項目にご同意いただけない場合は、本サービスのご利用をお控えください。第1条 (定義) 入力画面へ戻る ○CSSのコード「kiyaku CSS」 /*スクロールのボックスの位置*/ .main { margin-left: auto; /* 中央寄せにするため */ margin-right: auto; /* 中央寄せにするため */ } /*スクロール内のボックスの指定*/ .main{ width:550px; height:350px; border: 2px solid #63e02d; overflow: auto; margin: 30px; color: #63e02d; } /*スクロールの幅の指定*/ .main::-webkit-scrollbar{ width: 10px; height: 10px; } /*スクロールの背景の指定*/ .main::-webkit-scrollbar-track { border-radius:5px; box-shadow: 004px #63e02d; } /*スクロールのつまみ部分の指定*/ .main::-webkit-scrollbar-thumb { border-radius: 5px; background: #63e02d; }

スクロールボックスを中央に配置したいのですが上手くいきません。自分のコードは下にあります。試してみ

解決済

質問者：pjdmgam
質問日時：2021/04/25 12:58
回答数：1件

スクロールボックスを中央に配置したいのですが上手くいきません。自分のコードは下にあります。

試してみたこと。
下記のURLを参考に https://h110.info/html_box_size/

ｃｓｓのスタイルシートに
margin-left: auto;
margin-right: auto;
を追加してみても変化がありませんでした。
何か私のやり方が間違っているのでしょうか？

どうしたらよいでしょうか？途方に暮れています。ちなみにスクロールのつまみの色等はきちんと適応されています。

画像も付属しておきます。ボックス内の文字一部消しています。

○HTMLコード

<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<link rel="stylesheet" href="kiyaku.css">
<title></title>

</head>
<body>
<form action ="hpform3.php" method ="post" name="doui_form" onsubmit="return false">
<p></p>
<div class="row">
<label class="col-sm-2 control-label" for="name">名前：<?php echo $name; ?></label>
</div>
<p></p>
<label class="title2" for="title2">利用規約</label>
</div>
<p></p>

<div class="main">

<p>(以下「本サービス」といいます。)を提供するにあたり、以下の通り利用規約を定めます。なお、本サービスのユーザーは本規約に同意されたものとみなします。<br>
すべての項目にご同意いただけない場合は、本サービスのご利用をお控えください。</p>

<h4>第1条 (定義)</h4>

</div>

</form>
<p><a href="form1.php?action=edit">入力画面へ戻る</a></p>
</body>
</html>

○CSSのコード「kiyaku CSS」

/*スクロールのボックスの位置*/
.main {

margin-left: auto; /* 中央寄せにするため */
margin-right: auto; /* 中央寄せにするため */
}

/*スクロール内のボックスの指定*/
.main{
width:550px;
height:350px;
border: 2px solid #63e02d;
overflow: auto;
margin: 30px;
color: #63e02d;

}

/*スクロールの幅の指定*/
.main::-webkit-scrollbar{
width: 10px;
height: 10px;

}
/*スクロールの背景の指定*/
.main::-webkit-scrollbar-track
{
border-radius:5px;
box-shadow: 004px #63e02d;
}
/*スクロールのつまみ部分の指定*/
.main::-webkit-scrollbar-thumb
{
border-radius: 5px;
background: #63e02d;
}

通報する

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

質問の本文を隠す

回答 (1件)

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

No.1ベストアンサー

回答者： fujillin
回答日時：2021/04/25 13:29

こんにちは

margin指定で中央寄せしようとしているのでしょうけれど、後から
　＞margin: 30px;
で上書きしているので、こちらが採用されます。
上記部分を消してみればいかがでしょうか？

ご質問には関係ありませんが、div要素の閉じタグが半端になっているなど、正しいHTMLにしておかないと、ブラウザ依存の解釈になるので、思わぬことが起きかねません。