jezikk jezikk - 3 years ago 231
CSS Question

CSS - How to align text and icon in one line

I need to align icon and text inside div in one line as is shown in the following picture:

enter image description here

I use flexbox to place the

shopping-cart-icon
and
shopping-cart-section
in one row.



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





But I don't know how to align icon in div
shopping-cart-icon
and text in div
shopping-cart-price
to the bottom.Can please help me?

Answer Source

Method 1: Using FLEX

Here I have used flex for solving the problem, given the property of display:flex to the shopping-cart-section. Now you can assign the children of Section i.e. Cart Name and Cart Price their individual Flex properties. Which are flex-grow. You can find the flex logic in the below example.

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

Method 2: Using line-height

Here in the below example, you can check using the line-height property. There can be scenarios where it can break, but changes will be very minute for images this small. But for your case, it's better to use 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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download