Question

这是配偶很容易，但由于某种原因，它变得复杂。我希望<a>标记中的文字与提交输入的文本一样，以Verticaly为中心。

在<a>我明白它是align-self: center; 但是当我这样做时，元素会失去它的高度。

这是我的代码。

  .flex{
  display: flex;
}

#form-buttons {
  align-items: stretch;
  font-weight: bold;
  width: 300px;
  height: 300px;
  a {
    align-self: stretch;
    background-color: blue;
    color: #fff;
    width: 50%;
  }
  input[type="submit"] {
    width: 50%;
    background-color: black;
    color: #fff;
    border: 0px;
  }
}


    <div id="form-buttons" class="flex">
          <input type="submit" name="front-side-prop-search" value="search">
          <a href="#">view all results</a>
    </div>

Answer 1

我会添加这两行（替换align-self prop）：

a {
    display: inline-flex;
    align-items: center;
}

Answer 2

从align-items: stretch;标记中删除#form-buttons和align-self: stretch; a，并将以下内容添加到a标记

a {
  display:flex;
  align-items: center;
  justify-content: center;
}

看起来像这样：

＆＃13;

.flex {
  display: flex;
}

#form-buttons {
  font-weight: bold;
  width: 300px;
  height: 300px;
}
#form-buttons a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: blue;
  color: #fff;
  width: 50%;
}
#form-buttons input[type="submit"] {
  width: 50%;
  background-color: black;
  color: #fff;
  border: 0px;
}

＆＃13;

<div id="form-buttons" class="flex">
  <input type="submit" name="front-side-prop-search" value=" search">
  <a href="">all values</a>
</div>

＆＃13;

Flexbox垂直对齐到parrent中间

2 个答案: