CSS中彼此相邻的垂直对齐项目[重复]答案

【问题标题】：Vertical aligning items in CSS which are next to each other [duplicate]CSS中彼此相邻的垂直对齐项目[重复]
【发布时间】：2021-07-04 02:01:11
【问题描述】：

我在 div 中有 2 个图标和 1 个用作按钮的链接

.A {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
}

a {
  text-decoration: none;
}

.B {
  width: 100px;
  height: 50px;
}


/* when i change font-size for example to 10px then the element moves down a bit*/

.A span {
  text-transform: uppercase;
  color: black;
  font-size: 10px;
}

<script src="https://kit.fontawesome.com/4254229804.js" crossorigin="anonymous"></script>

<a href="#">
  <div class="A">
    <i class="fab fa-facebook-f"></i>
  </div>
</a>

<a href="#">
  <div class="A">
    <i class="fab fa-youtube"></i>
  </div>
</a>

<a href="#">
  <div class="A B">
    <span>sign up</span>
  </div>
</a>

这里是codepen的链接https://codepen.io/hanzus/pen/GRrMbbm

当“注册”链接的 span 元素的字体大小为 16 像素时，一切都居中，但是当我将其更改为例如 10 像素时，链接会向下移动一点，并且它与 facebook 的其他 div 不在同一行和 youtube 链接。

当我更改 1 个元素的字体大小时，如何将这些链接放在同一行上？

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

您应该只添加“flex-direction: column;”为您的 CSS 代码。

.container{
  display: flex;
  flex-direction: column;
}

.A {
  width:50px;
  height: 50px;
  border: 1px solid black;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  margin: 5px;
}

a {
  text-decoration:none;
}

.B {
  width: 100px;
  height: 50px;
}

.A span {
  text-transform: uppercase;
  color:black;
  font-size: 10px;
}

【讨论】：

【解决方案2】：

我知道我参加聚会有点晚了，但可以让它变得更简单：

.container {
  display: inline-flex;
  width: 300px;
  height: 50px;
}

.container a {
  width: 33%;
  margin: 5px;
  border: 1px solid black;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  font-size: 16px;
}

  <div class="container">
      <a href="#">
          <i class="fab fa-facebook-f"></i>
      </a>

      <a href="#">
          <i class="fab fa-youtube"></i>
      </a>

      <a href="#">
          <span>sign up</span>
      </a>

  </div>

【讨论】：

【解决方案3】：

包裹在弹性中：

.container {
  display: flex;
}

<div class="container">
  <a href="#">
    <div class="A">
      <i class="fab fa-facebook-f"></i>
    </div>
  </a>

  <a href="#">
    <div class="A">
      <i class="fab fa-youtube"></i>
    </div>
  </a>

  <a href="#">
    <div class="A B">
      <span>sign up</span>
    </div>
  </a>
</div>

Codepen

【讨论】：