Question

我在使三个css按钮具有相同的大小（使用填充）并使其垂直对齐方面遇到问题，因为第二个按钮具有“
”，这使其与其他两个按钮不相等。另外，我被告知要使用弹性盒。我希望按钮以相同的尺寸对齐，但不能这样做。

这是html：

.flex.container.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  position: relative;
}

.child {
  background-color: rgb(242, 242, 242);
  display: table-cell;
  padding: 25px;
  margin: 4px;
  color: rgb(75, 75, 75);
  text-align: center;
}

<div class="article container">
  <div class="flex container parent">
    <div class="child">ARTICLES</div>
    <div class="child">
      CASE STUDIES /<br /> WHITEPAPERS
    </div>
    <div class="child">NEWS/EVENTS</div>
  </div>

感谢大家的帮助，非常感谢！！现在可以按照我想要的方式工作！

Answer 1

从父母那里移除align-items:center并将其放在孩子身上（给他们display:flex之后）。

.flex.container.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  vertical-align: middle;
  position: relative;
}

.child {
  background-color: rgb(242, 242, 242);
  padding: 25px;
  margin: 4px;
  color: rgb(75, 75, 75);
  text-align: center;
  display: flex;
  align-items: center;
}

<div class="article container">
  <div class="flex container parent">
    <div class="child">ARTICLES</div>
    <div class="child">
      CASE STUDIES /<br /> WHITEPAPERS
    </div>
    <div class="child">NEWS/EVENTS</div>
  </div>

Answer 2

您应该简单地为.child指定一个高度。这样，您可以控制所有元素的高度相同。最终，您可以使用max-height。

.flex.container.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  position: relative;
}

.child {
  background-color: rgb(242, 242, 242);
  display: table-cell;
  padding: 25px;
  margin: 4px;
  color: rgb(75, 75, 75);
  text-align: center;
  height: 30px;
}

<div class="article container">
  <div class="flex container parent">
    <div class="child">ARTICLES</div>
    <div class="child">
      CASE STUDIES /<br /> WHITEPAPERS
    </div>
    <div class="child">NEWS/EVENTS</div>
  </div>

Answer 3

.parent {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    vertical-align: middle;
    position: relative;
}

.tab-selections {
    background-color: rgb(242, 242, 242);
    display: table-cell;
    padding: 25px 100px;
    margin: 4px;
    color: rgb(75, 75, 75);
    text-align: center;
}

.child {
  margin:0 10px;
  background-color: gray;
}

<div class="article container">
  <div class="flex container parent">
    <div class="child">ARTICLES</div>
    <div class="child">
      CASE STUDIES /<br />
      WHITEPAPERS
    </div>
    <div class="child">NEWS/EVENTS</div>
</div>

我有3个CSS按钮，但另一个有<br/>

3 个答案: