Q&A
できればコードブロックはファイル毎にわけてください。
前提・実現したいこと
vertical-align: middle;を各container内タグに適用させて、上下中央寄せさせたい。
発生している問題・エラーメッセージ
vertical-align: middle;が効かない.
無し
該当のソースコード
---html--- <!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="test_css.css"> <title></title> </head> <body> <header> <div class="container"> <div class="header-logo"><img src="C:\Users\kusud\OneDrive\画像\ドキュメント\新しいフォルダー\text fot atom\html.hmtl\isara\isaralogo.png" alt="isaralogo"></div> <div class="headline">バンコクのノマドエンジニア育成講座</div> <div class="header-right"><a href="#">お問い合わせ / 資料請求はこちら</a><div class="header-right"> </div class="container"> </header> </body> </html> ---css--- body{ margin:0; } header{ height:75px; width:auto; background-color: blue; } .container{ width: 1170px; height: 75px; margin:0 auto; background-color: red; } .header-logo img{ height: 45px; background-color: green; vertical-align: middle; } .header-logo{ background-color: black; display: inline-block; vertical-align: middle; } .headline{ display: inline-block; vertical-align: middle; } .header-right{ display: inline-block; vertical-align: middle; }
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
初心者なものであまりわかりません。
具体的に何をどうすればよいのでしょうか？
https://teratail.com/questions/238564#reply-346766
↑にあるようにすれば幾つでも設置できるので、それをファイル毎にコードを囲えば良いです。
```html
HTMLのコード
```
```css
CSSのコード
```
回答2件
0
vertical-align はtable関連要素orインラインボックスでのみ有効です。
解決手段は過去ログにあります。
Re: jampan02 さん
投稿2020/05/08 12:16
総合スコア18189
0
ベストアンサー
.containerに対して、
CSS
1display: flex; 2align-items: center; 3
投稿2020/05/08 12:11
総合スコア116724
あなたの回答
tips
プレビュー
