CODEWITHSUNDEEP
htmlcsssassflexbox
jezikk
jezikk

Reputation: 111

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?

Upvotes: 2

Views: 8511

Answers (3)

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

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>

Upvotes: 2

Jane Delugas
Jane Delugas

Reputation: 163

Assuming I have understood you correctly this can be achieved with a couple of lines of CSS using Flexbox -

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

Here is Codepen result - https://codepen.io/anon/pen/OxjJeW

Upvotes: 0

adrian.krzysztofek
adrian.krzysztofek

Reputation: 969

The easiest approach would be to set the height of all elements. 

.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

Upvotes: 0

Related Questions