flexで高さを指定した場合のテキスト上下中央配置について

#flexで上下中央配置

Adobe Dreamweaverでグローバルナビを作っています。

画像の状態を目指していますが、文字の配置がうまくいきません。
区切り線の高さを指定すると、2つの問題が発生します。
１、liの1つ目以外は上添えになる。
２、liの1つ目のホバー領域が文字高準拠になる。
以下にスクリーンショットと実際に入力した情報を載せます。
どうすれば画像の状態にできるかアドバイスを頂ければ嬉しいです。

<style>
nav {
}
ul {
	padding-left: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
}
li {
	list-style-type: none;
	flex: 1;
	text-align: center;

}
li:hover{
	list-style-type: none;
	flex: 1;
	background-color: #555;
	text-align: center;
	}
li+li{
		border-left: 1px solid #555;
		height: 60px;
}
a {
	text-decoration: none;
}
</style>
</head>
<body>
	<nav>
		<ul>
			<li><a href="">ごあいさつ</a></li>
			<li><a href="">会社紹介</a></li>
			<li><a href="">商品紹介</a></li>
			<li><a href="">お問合せ</a></li>
		</ul>
	</nav>
</body>

行動規範の内容に同意します

回答2件

ulに指定したflexは、子要素であるliを整列させる指定ですから、liの中のaタグの中の文字であるリンクテキストには全く作用しません。

またhover時に付ける背景色がliの面積と同じですから、aタグとliタグの面積を同じにして、hoverの指定もaタグに付けた方がわかりやすいと思います。そしてaタグの文字を上下左右中央にしたいわけですから、aタグにもflexを指定して、さらにjustify-contentとalign-itemを指定すればいいです。

したがって、li:hoverの記述は削除します。
あとli+liのheightの意味がわからないですが、これはliに打つべきでは？
li+liは「li要素の後に続くli要素」への指定ですから、間に挟む罫線はわかりますが、heightはすべてのliに共通だと思います。この指定では一つ目のliにはheightが適応されませんから、heightはliに移すか、aタグに打てば大丈夫です。

ということで、

ul {
    padding-left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
li {
    list-style-type: none;
    flex: 1;
}
li:hover{
    不要です。
}

li+li{
        border-left: 1px solid #555;
}
li a {
    text-decoration: none;
    display: flex;
    height: 60px;
    align-items: center;
    justify-content: center;
}
li a:hover {
    background-color: #555;
    color: #FFF;
}

これでいけると思いますがどうでしょう？
うまくいかなかったらうまくいかなかった点をまた教えてください。

投稿2019/01/29 07:38

kota1010

総合スコア59

azuapricot

2019/01/29 07:40

根本解決するにはkota1010さんの回答が正解ですねしっかり再現できましたしお勉強になります～～～～～～～！

kota1010

2019/01/29 07:44

ああ、回答書いている間に解決済みになってましたね。出しゃばっちゃったみたいですいません(^^; 質問が「flexで上下左右中央配置」でしたので、あくまでflexでの解決方法ということでお伝えしました。 flexにこだわらないのであれば、azuapricotさんが書かれたように、heightとline-heightの値を同じにする、というのが上下中央の一番シンプルなテクニックです。とはいえ、line-heightというのはそもそも「行間」の指定ですので、line-heightによる上下中央テクニックの一番の落とし穴は、対象テキストが２行以上になるとアウトだ、ということです。これは実際にどうなるかコードを書けば一目瞭然かと思います。また使用フォントなどでも微妙にline-heightではズレが生じたりしますし、いずれにしろまだflexがない時代の「苦肉の策」ですので、flexが使える今の制作ではline-heightではなくflexのalign-itemsを使うのがベターだと思います^^

azuapricot

2019/01/29 07:47

私もあんな小細工じゃなくてどうにかならないかと試行錯誤はしてみたのですが、いかんせん知識不足で・・・笑あれが精いっぱいでしたので回答ありがとうございます！ためになりました！

azuapricot

2019/01/29 07:48

（高評価ぼたんあと10回くらい押したい（願望））

kota1010

2019/01/29 07:59

gknさんも書かれていたとおり、たぶんつまずかれるのは「aタグに高さを指定しても効かない」という点じゃないかと思います。これはdisplayの値がblockかinlineか、というCSSの仕様の問題が絡んでまして、多くのタグがどちらかに属するのですが、inlineに属するタグは高さなど、縦方向の指定が基本効かないんです。そしてaタグもこのinlineの方なんです。 line-heightは縦方向の指定ですが、これは先も書いたとおり「行間」で、実際には一行でも、値を大きくすると上下にも行があると想定して、行間の余白を確保します。たとえばline-height: 60px;というのは、上下に行間を30pxずつ確保する、という指定です。これで擬似的に上下に空間が設けられ、今回の場合で言えば、ちょうど上下に同じ行間が付くことで上下中央に見える、というわけです。ですが今はflexが使えますから、まずdisplay: flex;の指定をすると、aタグはinlineではなくflexという別の属性（block寄りの属性）となり、高さが有効になります。高さが指定されていてflexのalign-itemsを使えば、中の要素は上下中央に自動的に配置される、というわけです。このdisplayのblockとinlineの理解が進むと、結構いろいろなモヤモヤが解消されるかもしれません(笑) よろしければこちらなど参考にしてみて下さい。【CSS】displayの使い方を総まとめ！inlineやblockの違いは？ https://saruwakakun.com/html-css/basic/display

azuapricot

2019/01/29 08:04

インライン要素とブロックレベル要素に関しては理解できているのですが、勉強不足でflexはあまり使用したことがなく・・・笑質問者ではないしがない回答者に細かくすごくわかりやすく教えていただいて助かります（感涙） flexについて勉強して自分でも使ってみたいとおもいます～！！ありがとうございました！

gkn

2019/01/29 08:12 編集

kota1010　ありがとうございます。おっしゃる通り、flexで上下左右中央配置を求めておりました。頂いた解説、とても勉強になります！お二人がaタグに対して設定を行っているのを見て、 flexの親要素と子要素が分かっていないことが分かりました。ありがとうございます。

kota1010

2019/01/29 08:16

＞ azuapricotさんああ、インラインとブロックレベルは大丈夫でしたか、失礼いたしました(^^; flexは私もまだ使いながら勉強してるようなところもありますが、これまでできなかったことが簡単に実現できるので、使いこなせた方が絶対にいろいろ楽になると思います。一緒に頑張りましょう。高評価もありがとうございました^^ ＞gknさん CSSのプロパティは、親に指定すると子や孫にまで指定が継承されるもの（font系など）と、子の代までで孫以降には継承されないものの２パターンがあります。flexも子までしか継承されないので、注意が必要かもしれません。特に今回の場合は、ulのflexは子要素のliを整列させるためのもので、aタグのflexは中のテキストを整列させるためのもの、という役割を区別することがポイントかと思います。こんな風にflexが入れ子になることも少なくないですね。 aタグをできるだけそのままにする、ということも特にないかと思います。むしろaタグはhoverの指定をしますから、ノーマル時とhover時の違いをハッキリさせるためにも、aタグに積極的に指定を入れて、ulやliは最小限にした方が、たぶんわかりやすいコーディングになるかと思います。以上参考になれば^^

s8_chu

2019/01/29 23:17 編集

質問が既に解決済みですが、もし`li+li`の記述を残したまま質問者さんの実現したいことを行うならば、このように( https://codepen.io/anon/pen/VgKoQm )行うことも出来ますね。

kota1010

2019/01/29 23:28 編集

codepen拝見しました。わざわざありがとうございます。確かにcodepenのサンプルはOKですが、ulのalign-items: center;が抜けているようです。 gknさんのコードに入っていたので、私もそれを踏襲しました。 align-itemsの指定が無ければ、align-itemsには初期値のstretchが指定されますから、一つ目のliは２個目以降のliの高さに揃いますので、意図通りになります（今のcodepenの状態）。ですがulのalign-items: center;を生かすと、パッと見は変わりませんが、一つ目のliだけ高さ指定がなくなりますので、中のaタグの高さはアンカーテキストの文字分の高さだけになります。従って、hoverをした時には背景色がテキスト１行分しかつかなくなって、li分の高さをカバーしなくなってしまいます。そもそもulのalign-items: center;は不要だと私も思うのですが(^^;、一応最初に入っていたそれを生かした結果、あのような回答にした次第です。わざわざコメントありがとうございました。

gkn

2019/01/31 03:47

s8_chu さん、kota1010 さん、ありがとうございます。頂いたコードを拝見しました。 ulのalign-items: center;を記述したことによりホバー範囲が文字の高さになってしまったんですね。お二人の会話で、記述によっては一部だけ設定が解除されることを知りました。ありがとうございます。今後は、解除になってないかも調べてみます。

行動規範の内容に同意します

ベストアンサー

CSS
1a {
2    line-height:60px; /*追加*/
3    text-decoration: none;
4}

根本的解決ではないとは思いますが、
一応aタグに line-heightを設定すると恐らくご期待通りの動作が再現できましたのでお試しください。

↓参考サイト
https://natsukimemo.com/css-vertical-center

投稿2019/01/29 07:20

azuapricot

総合スコア2341

gkn

2019/01/29 07:30

ありがとうございます。とても助かりました。 aタグにheightを指定しても直らなかったのに line-heightにすれば直るなんて思ってもみませんでした！ありがとうございます。

azuapricot

2019/01/29 07:33

私もこういう事象にあたったことがなかったので色々調べました・・・笑 after要素なども便利なので余裕ができたら調べてみるとよいかもしれません。 https://saruwakakun.com/html-css/reference/border-length

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

flexで高さを指定した場合のテキスト上下中央配置について

関連した質問