Q&A前提・実現したいこと
Ruby on Rails でHPの作成を行なっているところ、formタグのinputタグと検索ボタンの上下中心揃え(align-items: center;)が効かない状況となっており、それを解決したくご質問させていただきました。
index.html.erb
<div class='back-img'> <%= render "shared/header" %> <body> <div class='app-description'> <p class="description-text">hoge</p> <p class="description-text">・hoge</p> <p class="description-text">・hoge</p> <p class="description-text">hoge</p> <p class="app-title-script">hoe</p> </div> <div class="registration_path"> <%# unless user_signed_in? %> <%= link_to 'hohe1新規登録', new_consignment_side_user_registration_path, class: "consignment_side_user_registration" %> <%= link_to 'hoge2新規登録', new_contracted_side_user_registration_path, class: "contracted_side_user_registration" %> <%# end %> </div> <div class='serch-bar'> <form class="search-form" action="#"> <button class="search-button"> <%= image_tag "search-btn.png", class:"search-icon" %> </button> <input class='input-box' placeholder='キーワードから探す'> </form> </div> </body> </div> <%= render "shared/footer" %>CSS
/* 背景画像 */
.back-img {
background-image: url("https://cdn.pixabay.com/photo/2019/12/17/17/09/woman-4702060_1280.jpg");
background-size: 100vw;
background-repeat: no-repeat
}
/* 画像上文字列 */
.app-description {
margin-left: 150px;
margin-top: 200px;
}
.description-text{
font-size: 20px;
padding: 5px;
}
.app-title-script {
font-size: 60px;
font-family: 'Pinyon Script', cursive;
padding: 50px;
}
/* 新規登録画面 */
.registration_path {
display: flex;
justify-content: space-around;
margin-top: 280px;
}
.consignment_side_user_registration {
color: black;
font-size: 25px;
text-decoration: none;
background-color: #ffdbdb;
border: 1px solid #ffc6c6;
border-radius: 10px;
padding: 20px
}
.contracted_side_user_registration {
color: black;
font-size: 25px;
text-decoration: none;
background-color: #ffdbdb;
border: 1px solid #ffc6c6;
border-radius: 10px;
padding: 20px
}
/* 検索バー */
.serch-bar {
display: flex;
justify-content: center;
align-items: center; ←ココが効かない
margin-top: 10px;
}
.search-icon {
height: 30px;
cursor: pointer;
}
.input-box {
height: 30px;
width: 60vw;
}
試したこと
・記述ミスの確認
・親要素のheihtによる影響を確認
補足情報（FW/ツールのバージョンなど）
macOS BigSur
Rails 6.1.3.1
リセットCSS:Normalize.css
回答1件
0
自己解決
セレクタの記述ミスでした。
.search-form {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
投稿2021/05/03 04:39
総合スコア2
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。