ここから本文です

【css3】縦中央揃えの仕方を教えて下さい! <ul>下の<li>内の文字列を 縦中央...

lan********さん

2016/9/2920:24:13

【css3】縦中央揃えの仕方を教えて下さい!

<ul>下の<li>内の文字列を
縦中央揃えにしたいのですができません。

ulはliの2倍の高さを持っています。

liは横並びになっています。

ul,li両方に
display:table-cell;及び
vertical-align:middle;をしても
縦中央揃えが出来ません。

liだけならpaddingやmarginで調節してもいいのですが
liの中の文字列とliの::beforeと::afterも縦中央揃えさせたいです。

色々試しているのですがうまく行きません。
どのようにすれば良いでしょうか。

閲覧数:
107
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

yoy********さん

2016/9/3000:27:13

https://jsfiddle.net/yrdf9ud6/4/

作ってみました。
見て下さい。

  • 質問者

    lan********さん

    2016/9/3010:40:45

    ありがとうございます。
    今まで考えたことがない配置の仕方で
    とても参考になったのですが、
    縦中央揃え→上下中央揃え
    に訂正します。すみません。

    現状は以下のアドレスにアップしています。
    http://lan.webcrow.jp/test/
    ソースも閲覧可能です。

    (横長画面でないと見た目崩れます。)
    (あとでメディアクエリで直すのでこれは放置。)

    ハンバーガーメニューをクリックしたあと出てくる
    画面上部のメニューバー内のオブジェクトを
    上下中央揃えしたいです。
    文字と仕切りの「|」の縦位置が視覚的に上下中央揃えされた状態にしたいです。
    (「|」はbefore,afterで作成した長方形。)

    更に欲を言うと
    hover時のアニメーションがメニュー両サイドのように
    上下に広がるようにしたいです。
    (これをやろうとすると、何故か文字も動いてしまう。)

    とりあえずはメニューの上下中央揃えの実装方法を、
    もし余裕があればアニメーションのやり方も教えていただけると大変助かります。

  • その他の返信を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

質問した人からのコメント

2016/10/6 14:47:30

丁寧な回答ありがとうございました。

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる