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

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

ただいまの
回答率

90.51%

  • CSS

    5785questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSS 文字数の違うグローバルナビで高さを均一、文字を縦横中央にしたい

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 586

brebre

score 21

文字数可変、ナビ数増減ありという条件の中で、
高さを均一にし、高さいっぱいのリンク、文字は縦横中央にしたいのですが、
うまくいきません。

下記のコードでは、高さ均一、高さいっぱいのリンクは実現できるのですが、
文字が縦中央になりません。

ulタグにdisplay:table、liタグにdisplay:table-cellを指定したパターンでも試してみたのですが、liタグ内のaリンクを高さいっぱいにひろげることができず下記のコードを試した次第です。

ご教授いただけますと幸いです。

よろしくお願いいたします。

※追記
htmlは変更できないものとして、CSSのみの変更で実現させたいです。

※追記2
下記のコードでは複数行にならないとのことで、
SAMPLE3の文字を増やしました。

<ul>
 <li><a href="#">HOME</a></li>
 <li><a href="#">SAMPLE1</a></li>
 <li><a href="#">SAMPLE2SAMPLE2SAMPLE2</a></li>
 <li><a href="#">SAMPLE3SAMPLE3SAMPLE3SAMPLE3SAMPLE3SAMPLE3SAMPLE3SAMPLE3SAMPLE3SAMPLE3SAMPLE3SAMPLE3</a></li>
</ul>
ul {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px 0;
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    -webkit-align-items: stretch;
  align-items:         stretch;
}
ul li {
    flex: 1;
    -webkit-flex: 1;
    border-right: 2px dotted #ccc;
}
ul li a {
  display: block;
    width: 100%;
    height: 100%;
  padding: 10px;
    color: #43230d;
  text-align: center;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+1

aタグのpadding分だけはみ出る(ずれる)のではないでしょうか。
box-sizing: border-box;を使ってみるのはいかがでしょう?

こういう何がどこにあってどれだけずれているかわかりにくいので、
一時的に背景色などをつけてみるとわかりやすくなると思います。

追記
具体的には・・・
CSSの ul li a {...} にbox-sizing: border-box; を追加してpadding で高さなどを調節するだけです。
ご希望のようにならないでしょうか?

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/14 22:42

    box-sizingにはborder-boxを設定してあるのですが、文字が上に並んでしまい、縦中央にはなりませんでした。
    ナビ内の文字が1行だけであれば、どうにか揃えられるのですが、何文字入るかわからない状況で、複数行にも対応できるナビが作りたいとは思っています。

    キャンセル

  • 2017/09/14 22:57 編集

    複数行ですか・・・質問文に掲載のままのHTMLを変更しないとすれば、複数行にならないような気もしますが、複数行になった(した)とすれば、1行しかない項目は上に寄ってしまいますね。

    キャンセル

  • 2017/09/15 13:13

    失礼いたしました。
    追記で文字数を増やしました。おそらくこれで複数行になるはずです。

    今回はjQueryで実装しましたが、CSSでも実装できるよう、もう少し考えてみたいと思います。

    キャンセル

checkベストアンサー

0

liaの高さを取得し、その差分をapaddingに与えて高さを揃え、文字が真ん中にくるようにしました。

ul li {
  flex: 1;
  -webkit-flex: 1;
  border-right: 2px dotted #ccc;
  list-style:none;
}
ul li a {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  padding: 0 10px;
  color: #43230d;
  text-align: center;
  word-break: break-all;
}
$(function(){
    var $box = $('ul li'), // 適宜クラスを当てて下さい
        $Link = $box.children('a'),
        boxHeight = $box.height();
    for (var i = 0; i < $Link.length; i++) {
        var linkHeight = $Link.eq(i).height(),
            // 差分をとります(上下半分ずつpaddingとするので÷2しています)
            diff = (boxHeight - linkHeight) / 2;
        $Link.eq(i).css({
            // 差分と、追加の余白で10px足しています
            paddingTop : diff + 10,
            paddingBottom : diff + 10
        });
    }
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/14 17:13

    記載忘れで申し訳ございません。
    htmlを変更しないで、実現する方法はあるのでしょうか。
    よろしくお願いいたします。

    キャンセル

  • 2017/09/14 17:52

    jQueryは導入されますか?
    jQueryを使用することを想定して回答を編集いたします。

    キャンセル

  • 2017/09/14 22:40

    jqueryは使用できます。

    試してみたところ、うまくいきませんでした。
    文字数の多い箇所は横幅が長くなってしまい、横幅均一になりませんでした。

    キャンセル

  • 2017/09/15 09:35

    jQueryは使えるんですね!
    再度書き直しますので、そちらで試してみて下さい

    キャンセル

  • 2017/09/15 13:11

    こちらを試したところ、意図する動きをすべて実装できました!

    今回はこちらをベストアンサーとさせていただき、
    CSSだけでも実装できないか試してみたいと思います。
    ありがとうございました!

    キャンセル

0

こんな感じでしょうか?

ul{ 
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row;
    flex-flow: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;

}
ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    border-right: 2px dotted #ccc;
    width:25%;
    height:auto;
    list-style:none;
    margin:0;
    padding:0;
}
ul li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    width: 100%;
    height: auto;

    color: #43230d;
    margin:0;
    padding:20px 0;
    text-align:center;
    word-break: normal;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/15 12:18

    回答いただきありがとうございます。
    縦横中央にはなったのですが、aタグのリンクが高さいっぱいに広がらなかったです...。

    キャンセル

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

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • CSS

    5785questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。