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

方法 1:使用 FLEX

这里我使用了 flex 来解决问题，并将 display:flex 属性赋予了 shopping-cart-section。 现在，您可以为部分的子项(即购物车名称和购物车价格)分配其各自的 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>

方法2:使用行高

在下面的示例中，您可以使用 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>