How to align md cards horizontally in using elements?

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: How to align md cards horizontally in <ul> using <li> elements?

Suraj Singh Bora , B.Tech., Mech. Engg., IIT (BHU), Varanasi (INDIA) asked 7 years ago

I want to align cards horizontally using *ngFor tags in <li>, but somehow they keep aligning vertically. How do I align them? The link to my code is https://jsfiddle.net/bso7bsd5/. The cards will be received from the server and I want to align 3 cards in a row until I receive them from the server. How do I make it possible?

Rafał Rogulski answered 7 years ago

Hi,   It's possible with flexbox, more information you can find here: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties   Regards  

Suraj Singh Bora , B.Tech., Mech. Engg., IIT (BHU), Varanasi (INDIA) commented 7 years ago

Thank you, sir, for introducing me to flexbox. It is amazing. But I am facing another problem aligning card's image and card's content horizontally using flexbox. How do I perform this task?

Rafał Rogulski commented 7 years ago

Give your li elements displa: flex and justify-content: center; this should work
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
About author
Suraj Singh Bora , B.Tech., Mech. Engg., IIT (BHU), Varanasi (INDIA)
0Support score
1Questions 0Answers
0Snippets likes 0Snippets