html - CSS - 如何在一行中对齐文本和图标

Question

我需要在一行中对齐 div 中的图标和文本，如下图所示:

我使用 flexbox 将 shopping-cart-icon 和 shopping-cart-section 放在一行中。

.shopping-cart-container {
  display: flex;
  align-items: flex-end;
}
.shopping-cart-container .shopping-cart-icon {
  background-color: blue;
  padding: 0px;
  text-align: bbo;
}
.shopping-cart-container .shopping-cart-section .shopping-cart-name {
  background-color: green;
  padding: 0px;
}
.shopping-cart-container .shopping-cart-section .shopping-cart-price {
  background-color: yellow;
  padding: 0px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="shopping-cart-container">
    <div class="shopping-cart-icon"><i class="fa fa-shopping-cart fa-3x"></i></div>
    <div class="shopping-cart-section">
        <div class="shopping-cart-name">Shopping cart</div>
        <div class="shopping-cart-price">12 000</div>
    </div>
</div>

但我不知道如何将 div shopping-cart-icon 中的图标和 div shopping-cart-price 中的文本对齐到底部。请帮忙我？

Answer 1

方法一:使用 FLEX

这里我使用 flex 来解决问题，将 display:flex 的属性赋予 shopping-cart-section。现在您可以为 Section 的子项(即 Cart Name 和 Cart Price)分配它们各自的 Flex 属性。哪些是 flex-grow。您可以在下面的示例中找到 flex 逻辑。

.shopping-cart-container {
  display: flex;
}

.shopping-cart-container .shopping-cart-icon {
  background-color: blue;
  padding: 0px;
  border: 1px solid black;
}

.shopping-cart-container .shopping-cart-section {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.shopping-cart-container .shopping-cart-section .shopping-cart-name {
  background-color: green;
  padding: 0px;
  flex-grow: 1;
}

.shopping-cart-container .shopping-cart-section .shopping-cart-price {
  background-color: yellow;
  padding: 0px;
  flex-grow: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="shopping-cart-container">
  <div class="shopping-cart-icon"><i class="fa fa-shopping-cart fa-3x"></i></div>
  <div class="shopping-cart-section">
    <div class="shopping-cart-name">Shopping cart</div>
    <div class="shopping-cart-price">12 000</div>
  </div>
</div>

方法二:使用行高

在下面的示例中，您可以使用 line-height 属性进行检查。在某些情况下它可能会中断，但对于这么小的图像，变化将非常微小。但对于你的情况，最好使用 Flexbox。

.shopping-cart-container {
  display: flex;
}

.shopping-cart-container .shopping-cart-icon {
  background-color: blue;
  padding: 0px;
}

.shopping-cart-container .shopping-cart-section .shopping-cart-name {
  background-color: green;
  padding: 0px;
  line-height: 25px;
}

.shopping-cart-container .shopping-cart-section .shopping-cart-price {
  background-color: yellow;
  padding: 0px;
  line-height: 25px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="shopping-cart-container">
  <div class="shopping-cart-icon"><i class="fa fa-shopping-cart fa-3x"></i></div>
  <div class="shopping-cart-section">
    <div class="shopping-cart-name">Shopping cart</div>
    <div class="shopping-cart-price">12 000</div>
  </div>
</div>