Container with several boxes and centered items - html

Question

I am struggling with my code. I need 8 boxes (2 columns with 4 rows) and the content shall be centered (horizontally and vertically). The content will be either an image or a text. The boxes shall have 50% of the width and there shall be space between the two boxes on one line. I tried different ways, but I wasn't successful.
My current code looks like this:
.desc {
display: grid;
grid-template-columns: 50% 50%;
padding-bottom: 30px;
text-align: center;
}
.image {
height: 200px;
max-height: 300px;
max-width: 500px;
object-fit: cover;
object-position: center;
}
.text {
text-align: center;
vertical-align: middle;
}
<div class="desc">
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>

Answer 1

If you check the below example, there are 8 boxes which are aligned in 2 columns and 4 rows with contents are vertically and horizontally centred. Check it and let me know if this is what you are looking for
* {
box-sizing: border-box;
}
section {
display: flex;
flex-wrap: wrap;
border: 1px solid red;
}
div {
flex: 1;
display: inline-flex;
max-width: 50%;
min-width: 50%;
border: 1px solid #ddd;
justify-content: center;
align-items: center;
text-align: center;
}
.bg-image {
background-image: url('https://i.ytimg.com/vi/k-POG1-Cp1k/maxresdefault.jpg');
background-size: cover;
min-height: 200px;
}
<section>
<div>1</div>
<div>2</div>
<div>3sdass asd assadas asd asdasadas asd asdasdassdaasasd sd as as</div>
<div>4</div>
<div class='bg-image'>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</section>
EDIT
Have updated the snippet with an item with a background-image, the image will automatically resize.

Answer 2

Flex Implementation. An another way.
If you want the texts in the tesxt section to be in two seperate lines, use flex-direction: column; for .text class
.desc {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.image, .text {
display: flex;
flex: 1 1 50%;
align-items: center;
justify-content: center;
padding: 5px;
box-sizing: border-box;
border: 1px dashed black;
flex-direction: column;
}
.image img {
max-width: 100%;
}
<div class="desc">
<div class="image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>

Answer 3

.desc,
.desc_inner {
width: 99%;
overflow: hidden;
margin: 0px auto;
}
.desc_inner {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 2px dashed #f69c55;
}
.text {
width: 100%;
text-align: center;
}
<!-- today -->
<div class="desc">
<div class="desc_inner">
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>
<div class="desc_inner">
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>
<div class="desc_inner">
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>
<div class="desc_inner">
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>
</div>