要素の中身を中央にしたい

Question

labelの中のspanを中央揃えにしたいのです。
labelをblock要素にしてtext-align：centerをしても効きません。
回答お願いいたします。

※ #burgerはナビバーの右端に寄せています。

　　　　　　<div id="burger">
            <input id="burger-input" type="checkbox" class="burger-unshown">
            <label id="burger-open" for="burger-input"><span></span></label>
            <label id="burger-close" class="burger-unshown" for="burger-input"></label>
            <div id="burger-content">
              <a href=""><p>ブログ</p></a>
              <a href=""><p>試合結果</p></a>
              <a href=""><p>公式アプリ</p></a>
            </div>
          </div>

#burger {
    position: absolute;
    right: 0;
    width: 68px;
    height: 68px;
  }
  
  #burger-open {
    display: block;
    width: 68px;
    height: 68px;
    margin: 0;
    text-align: center;
    cursor: pointer;
  }
  
  #burger-open span, #burger-open span:before, #burger-open span:after {
    position: absolute;
    display: block;
    content: '';
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: #555;
  }
  
  #burger-open span:before {
    bottom: -10px;
  }
  
  #burger-open span:after {
    bottom: -20px;
  }

Comments

[ktaro99]

「labelの中のspanを中央揃えにしたいのです。」というと、どの要素に対して縦or横方向のどちらに中央揃えにしたいのかを追記おねがいしてもいいですか？

Answer 1

#burger-open {
  display: flex;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin: 0;
  cursor: pointer;
}

Answer 2

block要素に対してはtext-alignを指定しても効きません
inline-blockにするかflexboxを使うかで対応しては？

Answer 3

/#burger-open {
// display: flex;
// justify-content: center;
// align-items: center;
/}
これで中央に来ました。お三方ありがとうございました<(__)>