代码之家  ›  专栏  ›  技术社区  ›  mHelpMe

将标签垂直居中放置在div中[复制]

  •  0
  • mHelpMe  · 技术社区  · 6 年前

    我想做一件我认为很容易做的事,但很明显这件事让人讨厌。这是 my fiddle

    我展示了一个按钮和一个标签。我想把标签放在div的中间,水平和垂直居中。

    我可以水平居中,但不能垂直居中。所以我尝试了一些东西,但似乎没有任何东西可以垂直地将标签居中,甚至是下面使用的垂直对齐。不知道为什么?

    .headerLbl {
       text-align: center;
       font-weight: bold;
       color: white;
       font-size: 14pt; 
       display: block;
       vertical-align: central;
    }
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   Charu Maheshwari    6 年前

    您需要在代码中添加以下样式:

    .menu {  
      background-color: #9FACEC;    /* Medium blue */
      position: fixed;
      width: 100%;
      margin: 0;
      z-index: 1;
      display:flex;
      justify-content: center;
    }
    
    .headerLbl {
       align-self: center;
       width: 90%;
       text-align: center;
    }
    

    It shouldn't. Notice the width with label.