Webishブログ

未経験から海外でweb開発を目標に、必死に勉強している人のブログ

flexで文字だけボックスの中央に寄せたい時

スポンサードリンク

これ、意外と盲点だったりするのですが、使えるとめちゃくちゃ便利なので書こうかと思います。

 

まず、タイトルの内容だけじゃ何言ってるか分からないと思いますので、これを見てください。

 

 

f:id:webish:20180912011130p:plain

 

これのマークアップはこれです。

 

 

 
ul {
  display: flex;
  width: 500px;
  padding: 50px 0 0 50px;
  li {
    width: calc(100% / 3);
    padding: 5px 20px;
    border: 1px solid #000;
    a {
    }
  }
}

 reset cssを使用しているので、listに余計なものをつけずにマークアップしました。

 

 

お気づきの方もいると思いますが、どう見ても文字が中央に来てないですよね

 

ここで、

 

text-align: center;

 

を発動させて真ん中にするのもいいんですが、上下も真ん中にしたい時もありますよね。そういう時のための一石二鳥の技があるんです。

 

 

 

ul {
  display: flex;
  width: 500px;
  padding: 50px 0 0 50px;
  li {
    width: calc(100% / 3);
    padding: 5px 20px;
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    a {
    }
  }
}

 このように、liにもdisplay: flex;を追加してあげると、その中の文字がflexとして扱われるので、さらにそこからflexのプロパティを上乗せする事ができるのです。

 

これにより、文字も天地中央に持ってくる事ができるのです。

 

これ、意外と盲点で知らない人が多く、しかも知ると世界が変わるくらい便利なので知っておくといいかもです!