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。 现在，您可以为Section子项分配（即Cart Name和Cart Price）各自的Flex属性。哪个是flex-grow。您可以在下面的示例中找到flex逻辑。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

方法2：使用行高

在下面的示例中，您可以使用line-height属性进行检查。 可能存在可能破坏的情况，但对于这么小的图像，变化将非常微小。但对于您的情况，使用Flexbox更好。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 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;}

DEMO：https://codepen.io/anon/pen/NavWej

Answer 3

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

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

以下是Codepen结果 - https://codepen.io/anon/pen/OxjJeW