how to align two image side by side (centre position) and text on them-CodePudding

so here is my question I am trying to align images like on this photo . so it is my piece of code

<body>
<div  >
    <div  >
        <img src="image/serviceimages/SVG/Asset 1.svg" alt="">
    </div>

    <div  >
        <img src="image/serviceimages/SVG/Asset 2.svg" alt="">
    </div>
</div> 

<div  >
    <div  >
        <img src="image/serviceimages/SVG/Asset 3.svg" alt="">
    </div>

    <div  >
        <img src="image/serviceimages/SVG/Asset 4.svg" alt="">
    </div>
</div>

it is a code without texts.

and there is my css what I have tried

.column {
  margin-left: auto;
  margin-right: auto;
  width: 20.33%;
  padding: 5px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
 
}

so the photos are under each other, not next each other so please any advice.

CodePudding user response：

Grid was just made for this. See annotated markup below. Some good resources are as follows:

Learn grid the easy way from Kevin Powell
The complete guide to grid at CSS tricks
Grid documentation on MDN
How to center in grid on geeks for geeks
Containing blocks and 'position' on MDN

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* We want 2 columns, each are the same width */
  grid-auto-rows: 1fr; /* also make all rows the same height */
  width: 20ch; /* Set the overall width, delete this if you want it responsive */
}

.item {
  margin-inline: 6rem;  /* put a margin left and right so the black lines don't extend all the way to the end. */
  padding: 1rem; /* put some padding round each image */
  position: relative; /* Create a new containing block for the text */
  display: grid; /* Make the item a grid container so we can super-easy place the content right in the middle */
  place-items: center; /* does what it says */
}

.item:nth-child(n 3) { /* select the last 2 item elements */
  border-top: 2px solid black;  /* put a border on */
}

.text {
  position: absolute; /* make this absolutely positioned so it appears over the images */
  font-weight: bold;
  font-size: 1.25rem;
  color: white;
  width: 75%; /* reduce the width to make it appear nicely over the image */
  text-align: center;
}

<div >
  <div > <!-- we don't need rows and columns, just elements within the grid container, we use css to define how it lays out -->
    <img src="https://picsum.photos/id/41/200" alt="">
    <div class='text'>Digital Marketing Channel Audit</div> <!-- put the text in a div so we can center it -->
  </div>

  <div >
    <img src="https://picsum.photos/id/13/200" alt="">
    <div class='text'>Digital Marketing Strategy</div>
  </div>
  <div >
    <img src="https://picsum.photos/id/27/200" alt="">
    <div class='text'>Social Media Management</div>
  </div>

  <div >
    <img src="https://picsum.photos/id/41/200" alt="">
    <div class='text'>Social Media Advertising</div>
</div>