入力フォームとセレクトボックスが真ん中に行きません。付属画像のように左に寄ったままです。ｃｓｓリセットしたら、フォームが横に並んだので、縦にしようと、 display: block;で縦にはできましたが、フォームを中央に寄せたいのですが、できません。.auto-style1と２に { text-align: center; }適応しても効果なし。form{ text-align: center; }効果なし、 input.name{ text-align: center; }効果なし、途方にくれています。どうしたらよいでしょうか？回答よろしくお願いいたします。 CSSの入力フォームのスタイルのところ#bangouよりしたの＃のところカットしてます。#bangouと全く同じCSSになります。 /*リットｃｓｓ*/ html, body, div, span, object, iframe, dl, dt, dd, ol, ul, li,span,address, form, label, legend, table, { margin:0; padding:0;} /* 入力フォームの位置 */ .auto-style1 { text-align: center; } /* セレクトボックスの位置 */ .auto-style2 { text-align: center; } ※お申し込みフォーム選択 " /> ◎◎ｃｓｓのコード /* セレクトボックスのデザイン1 */ #plan{ vertical-align: middle; border: 3px solid #63e02d; /* 枠線 */ width: 27.1em; height: 53px; line-height: 1.2; /* 行の高さ */ } /* 入力フォームのスタイル */ #bangou { border: 3px solid #63e02d; /* 枠線 */ padding: 0.5em; /* 内側の余白量 */ width: 25.5em; height: 30px; line-height: 1.2;/* 行の高さ */ } } #name { } #lineid{ ｝ /* フォームの位置の調節 */ form{margin-top: 70px; text-align: center; } select.plan{ display: block; } input.bangou{ display: block; } input.name{ display: block; } input.lineid{ display: block; } /* フォーム間の上下の余白， */ input.bangou{margin:21px 0px;} input.name{margin:21px 0px;} input.lineid{margin:21px 0px;}

入力フォームとセレクトボックスが真ん中に行きません。付属画像のように左に寄ったままです。ｃｓｓリセッ

解決済

質問者：pjdmgam
質問日時：2021/06/26 11:34
回答数：2件

入力フォームとセレクトボックスが真ん中に行きません。付属画像のように左に寄ったままです。ｃｓｓリセットしたら、フォームが横に並んだので、縦にしようと、 display: block;で縦にはできましたが、フォームを中央に寄せたいのですが、できません。.auto-style1と２に { text-align: center; }適応しても効果なし。form{ text-align: center; }効果なし、 input.name{ text-align: center; }効果なし、

途方にくれています。

どうしたらよいでしょうか？回答よろしくお願いいたします。
CSSの入力フォームのスタイルのところ#bangouよりしたの＃のところカットしてます。#bangouと全く同じCSSになります。
<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8"/>

<title></title>

<style type="text/css">

/*リットｃｓｓ*/
html, body, div, span, object, iframe,
dl, dt, dd, ol, ul, li,span,address,
form, label, legend,
table, {
margin:0;
padding:0;}

/* 入力フォームの位置 */
.auto-style1 {
text-align: center;
}
/* セレクトボックスの位置 */
.auto-style2 {
text-align: center;
}
</style>
</head>
<body>

<div class="title5">※お申し込みフォーム</div>

<form action="form1.php" method="post">

<div class="auto-style2">
<span class="selectbox">
<select id="plan" class="plan" name="plan">
<option value="">選択</option>
</select>
</span>
</div>

<div class="auto-style1">

<input type="text" class="bangou" name="bangou" id="bangou" value="" />

<input type="text" class="name" name="name" id="name" value=">" />

<input type="text" class="lineid" name="lineid" id="lineid" value="" />

</div>
</form>
</body>
</html>

◎◎ｃｓｓのコード

/* セレクトボックスのデザイン1 */
#plan{
vertical-align: middle;
border: 3px solid #63e02d; /* 枠線 */
width: 27.1em;
height: 53px;
line-height: 1.2; /* 行の高さ */

}

/* 入力フォームのスタイル */
#bangou {
border: 3px solid #63e02d; /* 枠線 */
padding: 0.5em; /* 内側の余白量 */
width: 25.5em;
height: 30px;
line-height: 1.2;/* 行の高さ */
}

}
#name {
}
#lineid{
｝

/* フォームの位置の調節 */
form{margin-top: 70px;
text-align: center;
}

select.plan{
display: block;
}
input.bangou{
display: block;
}
input.name{
display: block;
}
input.lineid{
display: block;
}
/* フォーム間の上下の余白， */
input.bangou{margin:21px 0px;}
input.name{margin:21px 0px;}
input.lineid{margin:21px 0px;}

通報する

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

質問の本文を隠す

回答 (2件)

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

No.2ベストアンサー

回答者： naokita
回答日時：2021/06/26 20:19

昨日の続きですね。

input.lineid{
display: block;
}
/* フォーム間の上下の余白， */
input.bangou{margin:21px 0px;}
input.name{margin:21px 0px;}
input.lineid{margin:21px 0px;}

↑ 最後の７行を編集し、
↓ （個別でも良いけど）１つにまとめれば良い

input.lineid{
display: block; margin:21px auto;
}

- 0
- 件

通報する

この回答へのお礼

ありがとうございました

通報する

お礼日時：2021/06/28 11:49

参考程度に

No.1

回答者： fujillin
回答日時：2021/06/26 12:28

こんにちは

＞display: block;で縦にはできましたが
ブロック要素として表示する設定です。
一方で、ブロック要素はtext-alignの影響をうけません。（ブロックなので）

そのままでやりたいのなら、「ブロック要素　中央寄せ」あたりをキーに検索すれば、いくつかの方法が見つかるはずです。
あるいは、もともとのインライン要素として、text-alignで位置指定するかですね。

※ 何度も言っていますけれど（これで最後にしますが）、いい加減にして、基本を理解した方がよいですよ。
（妙な設定をしなくなるし、効率的な設定ができるようになるかと）