HTML/CSSでformのsubmitの要素を中央に寄せる方法について教えていただきたいです。

###実現したいこと
実現したいと考えていることは
・submenu内のcategoriesの検索ボタンとkeywordクラスをsubmenuの中心に表示
させたいと考えています。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5  <title>タイトル</title>
6  <link rel="stylesheet" href="sample.css">
7</head>
8<body>
9  <header>
10    <h1 class="title">タイトル</h1>
11    <div class="main_menu">
12      <ul class="menu">
13        <li>項目1</li>
14        <li>項目2</li>
15        <li>項目3</li>
16      </ul>
17    </div>
18    <div class="clear"></div>
19  </header>
20
21  <!--サブメニュー -->
22  <div class="main">
23
24
25
26    <div class="submenu">
27      <div class="categories">
28        <form action="####" method="####">
29          <ul class="category">
30            <!-- 後でvalue name を決める -->
31            <li><input type="checkbox" name="name1" value="1">カテゴリー１</li>
32            <li><input type="checkbox" name="name2" value="2">カテゴリー２</li>
33            <li><input type="checkbox" name="name3" value="3">カテゴリー３</li>
34          </ul>
35            <input type="submit" value="検索">
36        </form>
37      </div>
38
39      <div class="keyword">
40        <form action="####" method="####">
41            <input type="text" name="input_keyword">
42            <p><input type="submit" value="送信"></p>
43        </form>
44      </div>
45
46
47    </div>
48
49    <div class="contents">
50      <div class="content">
51        <h2 id="name0001">タイトル</h2>
52        <div>
53          <div class="section">
54            <p class="sub_title">小見出し</p>
55            <ul class="section_list">
56              <li>リスト</li>
57              <li>リスト</li>
58              <li>リスト</li>
59            </ul>
60          </div>
61          <p class="sub_title">小見出し</p>
62          <p>文章</p>
63        </div>
64      </div>
65      <hr>
66
67      <div class="content">
68        <h2 id="name0003">タイトル</h2>
69        <div>
70          <div class="section">
71            <p class="sub_title">小見出し</p>
72            <ul class="section_list">
73              <li>リスト</li>
74              <li>リスト</li>
75              <li>リスト</li>
76            </ul>
77          </div>
78          <p class="sub_title">小見出し</p>
79          <p>文章</p>
80        </div>
81      </div>
82      <hr>
83
84      <div class="content">
85        <h2 id="name0003">タイトル</h2>
86        <div>
87          <div class="section">
88            <p class="sub_title">小見出し</p>
89            <ul class="section_list">
90              <li>リスト</li>
91              <li>リスト</li>
92              <li>リスト</li>
93            </ul>
94          </div>
95          <p class="sub_title">小見出し</p>
96          <p>文章</p>
97        </div>
98      </div>
99      <hr>
100
101
102    </div>
103  </div>
104
105
106  <!--フッター -->
107  <footer>
108
109  </footer>
110
111
112</body>
113</html>
114
115

css
1@charset "utf-8";
2/*ここからはヘッダー部分*/
3header {
4  width:100%;
5  margin-bottom:30px
6
7}
8.title{
9float:left;
10}
11
12.menu{
13  float:left;
14  padding-right: 20px;
15}
16
17.menu li{
18  list-style-type:none;
19  float:left;
20  margin: 0px 30px 0px 50px;
21}
22
23.clear{
24  clear:left;
25}
26
27
28/*ここからはサブメニュー*/
29
30
31.submenu{
32
33  float:left;
34}
35
36.category li{
37  list-style-type:none;
38  margin:20px 0px;
39}
40
41.keyword{
42  margin:30px 0px 0px 0px
43}
44
45.contents{
46  float:left;
47}
48
49/*ここからはフッター*/
50footer{
51  clear:both;
52}
53

行動規範の内容に同意します

回答1件

ベストアンサー

submenu内のcategoriesの検索ボタンをsubmenuの中心に表示させたい

css
1.categories form {
2	text-align: center;
3}

keywordクラスをsubmenuの中心に表示させたい

ご提示のコードを試してみましたが、現状で中央に配置されていると思います。
サンプル

投稿2020/05/20 01:53

編集2020/05/20 03:10

Lhankor_Mhy

総合スコア36960

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

HTML/CSSでformのsubmitの要素を中央に寄せる方法について教えていただきたいです。

関連した質問