英文:
HTML Bootstrap Coding | Cards
问题
我正在使用Bootstrap创建我的网站的卡片。我试图将网格图片卡片的卡片内容居中。我尝试在不同部分应用class="center"，但项目仍然都左对齐。这是其中一个网格的片段：
<div class="col">
<div class="card">
<i class="fa fa-medkit fa-5x" aria-hidden="true" class="center"></i>
<div class="card-body">
<h5 class="card-title">Allied Health</h5>
<p class="card-text"></p>
</div>
</div>
</div>
我添加了class="center"，甚至添加了class="all contents aligned center"到不同的部分，但没有变化。
英文:
I am using a bootstrap to create cards for my site. I am trying to center the card contents of the grid image cards. I have tried applying class="center" into various parts and the items are still all aligned left. This is a snippet of one of the grids
<div class="col">
<div class="card">
<i class="fa fa-medkit fa-5x" aria-hidden="true" class="center"></i>
<div class="card-body">
<h5 class="card-title" >Allied Health</h5>
<p class="card-text" class="center"></p>
</div>
</div>
</div>
I added class="center" and even class="all contents aligned center" into different parts, but there was no change.
答案1
得分: 0
将属性 display: flexbox; 添加到你的 div 元素中。
你应该在其中添加一个 justify-content-center 类，以使内容在 flexbox 方式下居中。我可以给你一个有用的链接：在Bootstrap中居中元素。
英文:
add the attribute display: flexbox; to your div element.
You should add a justify-content-center class in it, to make it center the content in a flexbox way.
I can give you a useful link :center element in bootstrap
答案2
得分: 0
将text-center添加到card元素中。同时，请注意，每个HTML元素只能有一个类属性。要将多个类添加到单个元素中，需要用空格分隔它们。
英文:
Add text-center to the card element.
Also, note that you can only have one class attribute per html element. To add multiple classes to a single element, you separate them with a space.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-6">
<div class="card text-center">
<i class="fa fa-medkit fa-5x" aria-hidden="true"></i>
<div class="card-body">
<h5 class="card-title">Allied Health</h5>
<p class="card-text">Some card text here...</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论