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

【问题标题】：CSS - How to align text and icon in one lineCSS - 如何在一行中对齐文本和图标
【发布时间】：2018-03-12 09:03:56
【问题描述】：

我需要将 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 中的文本对齐到底部。请帮帮我吗？

【问题讨论】：

购物车图标和文字“12 000”必须与图片中的红线对齐。

标签： html css sass flexbox

【解决方案1】：

方法一：使用 FLEX

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

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

【讨论】：

【解决方案2】：

最简单的方法是设置所有元素的高度。

.shopping-cart-container .shopping-cart-icon { height: 50px;}
.shopping-cart-container .shopping-cart-section div {height: 25px; line-height: 25px; width: 150px; font-weight: bold;}

演示：https://codepen.io/anon/pen/NavWej

【讨论】：

【解决方案3】：

假设我已经正确理解了你，这可以通过使用 Flexbox 的几行 CSS 来实现 -

.shopping-cart-section {
  display: flex;
  background: green;
  margin-top: auto;
}

这是 Codepen 的结果 - https://codepen.io/anon/pen/OxjJeW

【讨论】：