a要素の中身の文字を上下左右中央に配置する方法

Question

a要素の中身の文字を上下左右中央に配置したいのですが、どのような方法がありますでしょうか？
レイアウトも含めご覧頂いた方が分かりやすいと思い、全コードはコードペンの方に、上げさせていただきました。
CODEPENのリンクなります
該当の箇所のコードは以下の部分になります。

									<div class="index_name_box">
										<h1>
											<span class="salon_shop_name">Been センター北店</span>
											<span class="salon_index_furi">ビーズ　センターキタ</span>
										</h1>
										<p class="index_salon_address">神奈川県横浜市都筑区中川中央2-7-1 港北MINAMO　　2F</p>
									</div>
									<div class="inquiry_box">
										<a class="salon_tel">
											045-592-9985
										</a>
										<a class="salon_reserve">
											WEB予約
										</a>
									</div>
									
								</div>

.img_bottom_index{
    width:1280px;
    margin:0 auto;
    background-color:rgba(255,255,255,0.6);
    position:absolute;
    z-index:2000;
    bottom:0;
}
.salon_shop_name{

    font-size:24px;
    font-weight:bold;

}
.salon_index_furi{
    font-size:12px;
    font-weight:400;
}
.index_name_box{
    margin-left:150px;
}
.index_salon_address{
    margin-top:0;
    margin-bottom:40px;
    font-size:12px;
}
.index_name_box h1{
    margin-bottom:10px;
    width:500px;
}
.salon_tel{
    background-color:#fff;
    margin-right:17px;
    
}
.inquiry_box{

    height:80px;
    margin-top:38px;
    font-size:25px;
}
.inquiry_box a {
    padding:9px;
    border-radius:5px;
    box-shadow:0 4px #ccc;
    width:240px;
    display:inline-block;
    text-align:center;
    height:50px;
}
.salon_tel::after{
    background-image:url(img/common_sprite.png);

}
.salon_reserve{
    background-color:#f99;
    padding:9px;
}

具体的には、「inquiry_box」内の、「salon_tel」そして、「salon_reserve」の２つのa要素の中身の文字を上下左右中央に配置したいと考えております。
「inquiry_box」内の2つのa要素に高さを設定したのですが、文字が上の方に固定されたまま下方向に伸びてしまった為、文字を中央を配置できないかと思い、「vertical-align」を設定するなどしたのですが、できなかった為、ご質問させてもらいました。
どなたか、ご回答いただければ幸いです。

Answer 1

これでどうですか。

.inquiry_box{
    display: flex; /*追加*/
    height:80px;
    margin-top:38px;
    font-size:25px;
}
.inquiry_box a {
    padding:9px;
    border-radius:5px;
    box-shadow:0 4px #ccc;
    width:240px;
    display:flex; /*変更*/
    justify-content: center; /*追加*/
    align-items: center; /*追加*/
    height:50px;
}

Comments

[newyee]

おかげで解決できました！
ありがとうございました！

Answer 2

下記追加でどうですか？

.inquiry_box {
  display: table;
}

.inquiry_box a {
  display: table-cell;
  vertical-align: middle;
}

Comments

[newyee]

ご回答ありがとうございます。
記載頂いたコードの方、追加してみましたら、文字は真ん中に設定することができたのですが、「inquiry_box a 」の高さを変更しても、ボックスが縮まらず、固定されてしまいました。
高さを変更することは、難しいでしょうか...?

Answer 3

下記追加でどうですか？

.inquiry_box a {
    box-sizing: border-box;
}

追記

高さ変えたいならline-heightで指定してください
その際heightは削除です

Comments

[newyee]

ありがとうございます。
ご回答頂いたコードの方追加してみたのですが、「height」を大きくすると、やはり下にだけボックスが伸びてしまい、文字は上に取り残された形になってしまいます...

[akihiro3]

追記しました

[newyee]

追記読ませていただきました。
勉強不足で申し訳ないのですが、「line-height」で高さを変更する必要があるとのことなのですが、何故「height」ではうまく調節することができないのでしょうか...?

[akihiro3]

「CSSで、line-heightプロパティは、１行あたりの高さを大きく定めれば、内包されたテキストは縦方向のおおよそ中央付近に配置されます。これは基本的な仕様ですので、あまり細かい説明は不要かもしれませんね。」
http://www-creators.com/archives/391より

[newyee]

ありがとうございます。
リンクの方、参考にさせて頂きます。