実現したいこと
HTML5で検索フォームを作っていて、テキストボックスが若干、下寄りになってしまいます。
真ん中にしたいのですが、どうすればいいですか?
初心者なのでわかりやすくお願い致します。
※テキストボックスはわかりやすいように色は変えていません。
発生している問題・エラーメッセージ
### 該当のソースコード **HTML** <div> <!--検索バー(フォーム)--> <form method="get" action="#" class="search_container"> <input type="text" size="33" placeholder="キーワード検索"> <input type="submit" value=""> </form> </div> **CSS** /*-----------------フォーム--------------------*/ .search_container{ background: #eee; box-sizing: border-box; position: absolute; border: 1px solid #999; padding: 3px 10px; border-radius: 20px; height: 2.0em; width: 260px; overflow: hidden; } .search_container input[type="text"]{ border: none; height: 1.7em; } .search_container input[type="text"]:focus { outline: 0; } .search_container input[type="submit"]{ cursor: pointer; font-family: FontAwesome; font-size: 1.3em; border: none; background: none; color: #3879D9; position: absolute; width: 2em; height: 2.2em; right: 0; top: -10px; outline : none; } /*------------------------------------------------------*/ /*------------------ハンバーガーメニュー-------------*/ .header { position: fixed; left: 0; top: 0; width: 100%; height: 32px; background-color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.16); } .global-nav { position: fixed; right: -320px; /* これで隠れる */ top: 0; width: 300px; /* スマホに収まるくらい */ height: 100vh; padding-top: 40px; background-color: #fff; transition: all .6s; z-index: 200; overflow-y: auto; /* メニューが多くなったらスクロールできるように */ } .hamburger { position: absolute; right: 0; top: 0; width: 40px; /* クリックしやすいようにちゃんと幅を指定する */ height: 40px; /* クリックしやすいようにちゃんと高さを指定する */ cursor: pointer; z-index: 300; } .global-nav__list { margin: 0; padding: 0; list-style: none; } .global-nav__item { text-align: center; padding: 0 14px; } .global-nav__item a { display: block; padding: 8px 0; border-bottom: 1px solid #eee; text-decoration: none; color: #111; } .global-nav__item a:hover { background-color: #eee; } .hamburger__line { position: absolute; left: 11px; width: 18px; height: 1px; background-color: #111; transition: all .6s; } .hamburger__line--1 { top: 10px; } .hamburger__line--2 { top: 16px; } .hamburger__line--3 { top: 22px; } .black-bg { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 100; background-color: #000; opacity: 0; visibility: hidden; transition: all .6s; cursor: pointer; } /* 表示された時用のCSS */ .nav-open .global-nav { right: 0; } .nav-open .black-bg { opacity: .8; visibility: visible; } .nav-open .hamburger__line--1 { transform: rotate(45deg); top: 20px; } .nav-open .hamburger__line--2 { width: 0; left: 50%; } .nav-open .hamburger__line--3 { transform: rotate(-45deg); top: 20px; } /*--------------------------------------------*/ # 試したこと CSSの.search_container input[type="text"]の部分で、heightを変えてもなぜか高さじゃなくサイズが変わりました。padingを追加して0にしても変わりませんでした。