将 Flex 项目置于底部答案

【问题标题】：Position Flex Item at Bottom将 Flex 项目置于底部
【发布时间】：2021-12-31 22:08:50
【问题描述】：

我是 HTML 和 CSS 的新手，如果这是一个简单的问题，我很抱歉。这是我正在努力实现的图像

客户数量和经验年限的图片

这就是我设法做到的

我的问题是如何将文本对齐）到与数字相同的水平

.experience {
  color: orange;
  display: flex;
  width: 50%;
}

.number {
  font-size: 5rem;
}

.number-text {
  float: right;
  padding-left: 10px;
}

.clients {
  color: orange;
  display: flex;
  width: 50%;
}

<div class="row">
  <div class="experience">
    <div class="col-lg-auto">
      <p class="number">
        12
      </p>
    </div>
    <div class="col-lg-auto">
      <p class="number-text">Years Of <br> Experience.</p>
    </div>
  </div>
  <div class="clients">
    <div class="col-lg-auto">
      <p class="number">
        14
      </p>
    </div>
    <div class="col-lg-auto">
      <p class="number-text">Satisfied <br> Clients.</p>
    </div>
  </div>
</div>

【问题讨论】：

.number-text { display:flex; align-items:center; height:100%; } 应该这样做

标签： html css twitter-bootstrap

【解决方案1】：

您可以使用position: relative; 和top CSS 属性来向下移动文本

我为top 属性使用了rem 值，因为如果您使用px，它不适用于所有设备。

.number-text {
    /* here the trick */
    position: relative;
    top: 0.8rem;
}

我还看到你不使用 DRY 方法

不要重复自己

改为这样做

.experience,
.clients {

/* your CSS */

}

我还在可重复使用的 CSS 变量中添加了您在图像中放置的相同颜色

* {
    --bg-color-blue: #252734;
    --gold-orange: #e9b258;
}

代码就是这样

* {
  --bg-color-blue: #252734;
  --gold-orange: #e9b258;
}

body {
  background-color: var(--bg-color-blue);
}

.experience,
.clients {
  color: var(--gold-orange);
  display: flex;
  width: 50%;
  align-items: center;
  justify-content: center;
}

.number {
  font-size: 5rem;
  font-weight: bold;
}

.number-text {
  float: right;
  padding-left: 10px;
  color: white;
  /* here the trick */
  position: relative;
  top: 0.8rem;
}

.row {
  display: flex;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="row">
    <!-- first parent -->
    <div class="experience">
      <div class="col-lg-auto">
        <p class="number">
          12
        </p>
      </div>
      <div class="col-lg-auto">
        <p class="number-text">Years Of <br> Experience.</p>
      </div>
    </div>

    <!-- second parent -->
    <div class="clients">
      <div class="col-lg-auto">
        <p class="number">
          14
        </p>
      </div>
      <div class="col-lg-auto">
        <p class="number-text">Satisfied <br> Clients.</p>
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：

DRY 出了什么问题？ @mplungjan
首字母缩写词写得很好，就像我在维基百科上看到的那样：en.wikipedia.org/wiki/Don%27t_repeat_yourself
发帖人要求文字与文字底部对齐，而不是居中。
好的。我会改变
@TrueAlpha 缩短了答案，现在只有好的答案了

【解决方案2】：

以下代码应该可以工作。只需添加 align-items:center; .experience div 的属性。

.experience{
align-items:center;
}

【讨论】：

【解决方案3】：

您可以在要居中的容器上使用align-self: center。

body {
  font-family: sans-serif;
  background: #000000;
}

#app {
  display: flex;
}

.experience {
  color: #fff;
  display: flex;
  width: 50%;
}

.number {
  font-size: 5rem;
}

.number-text {
  float: right;
  padding-left: 10px;
}

.clients {
  color: #fff;
  display: flex;
  width: 50%;
}

p {
  margin: 0; // set margin to zero
  // the p tag has a margin by default that you have to remove
}
  
  
.align-self-center {
  align-self: center; make the container align itself to center
}

<div id="app">
  <div class="experience">
    <div class="col-lg-auto">
      <p class="number">10</p>
    </div>
    <div class="col-lg-auto align-self-center">
      <p class="number-text">
        Years Of <br />
        Experience.
      </p>
    </div>
  </div>
  <div class="clients">
    <div class="col-lg-auto">
      <p class="number">12</p>
    </div>
    <div class="col-lg-auto align-self-center">
      <p class="number-text">
        Satisfied <br />
        Clients.
      </p>
    </div>
  </div>
</div>

【讨论】：

【解决方案4】：

您的 html 太复杂了，所有其他答案都不正确，因为它们使文本居中而不是与文本底部对齐。您可以使用align-items: last baseline; 正确执行此操作。

.client {
  display: flex;
  align-items: last baseline;
}

.number {
  font-size: 5rem;
}
.text {
  margin-left: 1em;
}

<div class="client">
  <div class="number">14</div>
  <div class="text">
   Years Of <br> Experience.
  </div>
</div>

但是如果你需要使用你的 html，那么你可以这样做：

.experience, .clients {
  color: orange;
  display: flex;
  width: 50%;
  align-items: last baseline;
}

.number {
  font-size: 5rem;
}

.number-text {
  float: right;
  padding-left: 10px;
  margin: 0;
}

.clients {
  color: orange;
  display: flex;
  width: 50%;
}

<div class="row">
  <div class="experience">
    <div class="col-lg-auto">
      <p class="number">
        12
      </p>
    </div>
    <div class="col-lg-auto">
      <p class="number-text">Years Of <br> Experience.</p>
    </div>
  </div>
  <div class="clients">
    <div class="col-lg-auto">
      <p class="number">
        14
      </p>
    </div>
    <div class="col-lg-auto">
      <p class="number-text">Satisfied <br> Clients.</p>
    </div>
  </div>
</div>

【讨论】：

不幸的是，我收到一条 linter 错误提示：预期 (flex-start | flex-end | center | baseline | stretch) 但找到了“最后一个基线”。
那么您需要升级您的 linter，因为所有现代浏览器都支持此功能developer.mozilla.org/en-US/docs/Web/CSS/…