如何在图像中显示的框中创建图像和文本答案

【问题标题】：How can I create the image and text in box shown in image如何在图像中显示的框中创建图像和文本
【发布时间】：2020-11-08 23:55:33
【问题描述】：

在图片中有图片和文字居中的卡片。如何在 MVC 项目中使用引导带来做到这一点。

【问题讨论】：

请详细说明手头的问题。我无法理解您要完成的工作以及您的项目是如何设置的。如果您提供更多信息，有人可能会为您提供帮助。
嗨，我想在该图像和文本中添加框。如图所示，一行有 5 个框，我是 bootstrap 新手
你不需要 Bootstrap - 只是普通的 HTML+CSS。无论如何，我不相信 Bootstrap 有内置的风格。

标签： asp.net-mvc asp.net-core bootstrap-4

【解决方案1】：

如果您只是在引导结构之后，它将如下所示

HTML

<div class="container">
      <div class="row">
        <div class="col-2 text-center">
          <div class="box">
            <img src="http://via.placeholder.com/50x50/ffc000/000000/?text=a">
            <p>Lorem ipsum</p>
          </div>
        </div>
        <div class="col-2 text-center">
          <div class="box">
            <img src="http://via.placeholder.com/50x50/ffc000/000000/?text=a">
            <p>Lorem ipsum</p>
          </div>
        </div>
        <div class="col-2 text-center">
          <div class="box">
            <img src="http://via.placeholder.com/50x50/ffc000/000000/?text=a">
            <p>Lorem ipsum</p>
          </div>
        </div>
        <div class="col-2 text-center">
          <div class="box">
            <img src="http://via.placeholder.com/50x50/ffc000/000000/?text=a">
            <p>Lorem ipsum</p>
          </div>
        </div>
        <div class="col-2 text-center">
          <div class="box">
            <img src="http://via.placeholder.com/50x50/ffc000/000000/?text=a">
            <p>Lorem ipsum</p>
          </div>
        </div>
      </div>
   </div>

CSS

.box {
  padding: 1.25rem 1rem;
  border: 1px solid gray;
  margin: .5rem 0;
}

【讨论】：