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

【问题标题】：I have 3 CSS buttons but the other one has <br />我有 3 个 CSS 按钮，但另一个有 <br />
【发布时间】：2018-09-27 09:59:49
【问题描述】：

我在使三个 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>

感谢大家的帮助，真的很感激！！它现在按我想要的方式工作！

【问题讨论】：

将 min-height 设置为按钮类并检查。
我试过这样做，但没有 br 的两个按钮中的文本将不再位于中间。

标签： html reactjs css flexbox

【解决方案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>

【讨论】：

由于某种原因，在“运行代码 sn-p”中，您的解决方案看起来很有效。但在我当地却没有。
您是否检查过本地版本中的代码...请注意，它与您在原始帖子中编辑的代码不同。例如.flex .container .parent 在您的原始代码中，但应该是.flex.container.parent（没有空格）我也使用class 而不是className。
我正在使用 reactJS，所以当我将 className 更改为 class 时，它给了我一个“未知属性”错误
我只是在指出不同之处......但空格/无空格的东西会是个大问题。
我将 flex 父级的类名更改为 1 个单词，并且成功了！

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：