[Vuejs]-How to align images and text together in a grid format

by

3👍

Adding to above answer. We can also use flexbox property of CSS in order to achieve such layout.

Please follow below code snippets for reference:

 

<!DOCTYPE html>
<html>
   <head>

      <!-- CSS style -->
      <style>
         .container1 {
         display: flex;
         }
         .container2 {
         display: flex;
         }
         p {
         margin-left: 10px;
         }
         img {
         margin-top: 5px;
         }
      </style>

   </head>
   <body>

      <div class="container1">
         <img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg"
            style="width:70px; 
            height:70px;" class="image--cover">
         <p> Someone followed you </p>
      </div>

      <div class="container2">
         <img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg"
            style="width:70px; 
            height:70px;" class="image--cover">
         <p> Me followed you </p>
      </div>

   </body>
</html>

References:

  1. https://css-tricks.com/snippets/css/a-guide-to-flexbox/#background
  2. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
👤Anshuman Yadav

2👍

If i undesrtand you correctly:

.card-body {
  display: grid;
  justify-items: center;
}
.contents {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1em;
}
.image--cover {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center right;
}
<div class="col-sm-3">
  <div class="cardearnings" style="height:89%;">
    <div class="card-body">
      <h2 class="card-title">Activity</h2>
      <div class="contents">
        <img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover">
        <i>Someone followed you</i>
        <img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover">
        <i>Me followed you</i>
      </div>
    </div>
  </div>
</div>
👤Nikola Pavicevic

Leave a comment