將Flex專案置于底部-有解無憂

我是 HTML 和 CSS 的新手，如果這是一個簡單的問題，我很抱歉。這是我試圖實作的目標的影像

客戶數量和多年經驗的圖片

將 Flex 專案置于底部

這就是我設法做到的

將 Flex 專案置于底部

我的問題是如何將文本）對齊到與數字相同的級別

.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>

uj5u.com熱心網友回復：

將 Flex 專案置于底部

你可以使用position: relative;和使用topCSS屬性向下移動文本

我rem為該top屬性使用了一個值，因為如果您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>

uj5u.com熱心網友回復：

以下代碼應該可以作業。只需添加 align-items:center; .experience div 的屬性。

.experience{
align-items:center;
}

uj5u.com熱心網友回復：

您可以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>

uj5u.com熱心網友回復：

您的 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/399997.html

標籤：html css 推特引导

上一篇：試圖使個人資料圖片和文本回應

下一篇：SVGforeignObject表單未顯示