代码之家  ›  专栏  ›  技术社区  ›  Mr. Man

我有三个高度相同的元素,但它们没有出现在同一水平,里面的文本也没有垂直居中[重复]

  •  0
  • Mr. Man  · 技术社区  · 10 月前

    我有三个元素,两个按钮和一个粗体文本元素,我想以相同的高度显示。我在一个标签中也有我想要居中的文本。以下是我现在看到的:

    Wrong vertical align and text placement

    我怎样才能集中注意力 <b> 标记文本并将其居中?

    以下是我的HTML/RReact代码:

            <div className="ContainerDiv">
              <button className="MinusButton"></button>
              <b className="Counter">100</b>
              <button className="PlusButton"></button>
            </div>
    

    我的css:

    .PlusButton {
      background-color: blue;
      width: 100px;
      height: 100px;
      display: inline-block;
    }
    
    .Counter {
      display: inline-block;
      background-color: white;
      width: 200px;
      height: 100px;
      text-align: center;
      color: #282c34;
      display: inline-block;
    }
    
    .MinusButton {
      background-color: blue;
      width: 100px;
      height: 100px;
      display: inline-block;
    }
    
    .ContainerDiv {
      display: inline-block;
      vertical-align: center;
      text-align: center;
    }
    
    2 回复  |  直到 10 月前
        1
  •  1
  •   Johannes    10 月前

    添加 vertical-align: top; 将所有内联块对齐。否则,默认的垂直对齐方式为 baseline (对于内联块)被应用,当不同元素内有文本还是没有文本时,这可能会导致混淆(即在您的实例中,中间块内的第一行文本与左右空内联块的底部对齐)。

    body {
     background: black;
    }
    .PlusButton {
      background-color: blue;
      width: 100px;
      height: 100px;
      display: inline-block;
      vertical-align: top;
    }
    
    .Counter {
      display: inline-block;
      background-color: #fff;
      width: 200px;
      height: 100px;
      text-align: center;
      color: #282c34;
      display: inline-block;
      vertical-align: top;
    }
    
    .MinusButton {
      background-color: blue;
      width: 100px;
      height: 100px;
      display: inline-block;
      vertical-align: top;
    }
    
    .ContainerDiv {
      display: inline-block;
      vertical-align: center;
      text-align: center;
    }
    <div class="ContainerDiv">
      <button class="MinusButton"></button>
      <b class="Counter">100</b>
      <button class="PlusButton"></button>
    </div>
        2
  •  1
  •   Amr    10 月前

    我建议的解决方案是使用 Flexbox 将元素对齐到同一水平,并将文本垂直居中。

    我们可以对你的CSS做一些调整。

    对于div容器:将display更改为flex以使用flexbox布局,对于计数器将display修改为flex。补充 align-items: center justify-content: center 将文本垂直和水平居中。对于已移除的按钮 display: inline-block 因为在flex容器中不需要它。

    HTML

    <div className="ContainerDiv">
      <button className="MinusButton"></button>
      <b className="Counter">100</b>
      <button className="PlusButton"></button>
    </div>
    
    

    CSS

    .ContainerDiv {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .PlusButton,
    .MinusButton {
      background-color: blue;
      width: 100px;
      height: 100px;
      border: none;
    }
    
    .Counter {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: white;
      width: 200px;
      height: 100px;
      color: #282c34;
      font-size: 24px; 
      margin: 0 10px; 
    }