包含多个盒子和居中项目的容器

Question

我的代码很吃力。我需要8个框(2列4行(，内容应居中(水平和垂直(。内容将是图像或文本。箱子应具有50%的宽度，并且在一条线上的两个箱子之间应留有空间。我尝试了不同的方法，但没有成功。

我当前的代码如下：

.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

如果您检查下面的示例，有8个框排列在2列和4行中，内容垂直和水平居中。检查一下，让我知道这是否是你想要的

* {
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>

编辑

用带有背景图像的项目更新片段后，图像将自动调整大小。

Answer 2

Flex实现。另一种方式。

如果您希望tesxt部分中的文本分为两行，请将flex-direction: column;用于.text类

.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>