vertical-alignが効かない

Question

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
初めて質問します。初心者です。
ヘッダーに社ロゴとお問い合わせリンクを左右で振って天地中央に配置したいのですが、vertical-alignが効かずに困っております。```ここに言語を入力
コード

今現在、ロゴはline-height、お問い合わせをmargin-topで無理やり天地中央に配置しているのですが、marginなどを使わずにvertical-alignなどでさらりと中央に配置したいのですが、どのようにすればいいのでしょうか？
ご教授お願いいたします。

###発生している問題・エラーメッセージ

vertical-alignが効かない

###該当のソースコード
```HTML
<header>
<style>
header {
	width: 100%;
	height:auto;
    background-color: #fff;
}
header .inner {
	width: 1000px;
	margin:0 auto;
	text-align:left;
	line-height:100px;
}
header .inner a:nth-child(2){
	background-color: #bac5c0;
	width:126px;
	height:60px;
	line-height:60px;
	float:right;
	text-align:center;
}
header .btns{
	margin-top:20px;
}
header span {
	color:#fff;
	font-weight:bold;
}
header .inner a:nth-child(2):hover {
    opacity: 0.8;
}

</style>
  <div  class="inner">
      <a href="" target="blank"><img src="image/logo.png" alt="" width="168" height="23" border="0"></a>
      <a href="" class="btns push" target="_blank"><span>お問い合わせ</span></a>
    </div>
  </header>

###試したこと
display:table-cell;
vertical-align:middle;
vertical-align
display:flex;
などは試しましたがうまいこと中央に配置されません。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Comments

[kei344]

バッククオート3つの前後には改行を入れてください。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

Answer 1

vertical-alignプロパティは通常、行のなかでのテキストや画像などの縦方向の揃え位置を指定するものです。
ただし例外的にtable-cell要素に対してvertical-alignを指定した場合は、子要素がどの高さに配置されるかを決めるスタイルになります。

あまり行儀が良い方法ではありませんが、天地中央に配置したい要素の親要素にdisplay: table-cell; vertical-align: middle;のCSSを指定すれば要素が手っ取り早く天地中央に表示されます。

<div style="display: table-cell; vertical-align: middle; border:solid 1px black; height: 100px;">
天地中央
</div>

Answer 2

分かりやすいように、headerに背景色、.innerにボーダーを引いてます。

header {
  width: 100%;
  height: 100px;
  position: relative;
  background-color: lightblue;
}

header .inner {
  width: 1000px;
  margin: auto;
  display: table;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 1px solid red;
}

header div.inner a {
  display: table-cell;
  vertical-align: middle;
}

header .inner a:nth-child(2) {
  background-color: #bac5c0;
  width: 126px;
  height: 60px;
  line-height: 60px;
  float: right;
  text-align: center;
}

header span {
  color: #fff;
  font-weight: bold;
}

header .inner a:nth-child(2):hover {
  opacity: 0.8;
}

Comments

[YSB]

できました！ありがとうございます。