时间戳

首页 > 解决方案 > 如何使用引导程序在 div 标签中居中元素

html - 如何使用引导程序在 div 标签中居中元素

问题描述

我想将图像居中div，我认为在某处犯了错误。这是我的html和css：

.col-xs-4 {
  background-color: lightgrey;
  width: 300px;
  height: 200px;
  border: 6px solid green;
  padding: 25px;
  margin: 25px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <a class="col-xs-4" *ngFor="let products of categoryProduc; let i = index" [routerLink]="[products.name]">

    <h4 class="list-group-item-heading">{{ products.name }}</h4>
    <p class="list-group-item-text">{{ products.description }}</p>

    <img [src]="products.image" style="   left: 40%;
        max-height: 100px; ">
  </a>
</div>

我想在另一个下方设置h2和在中心。p

标签： htmlcsstwitter-bootstrap

解决方案

只需在row旁边使用text-center一个引导类。在父 div

推荐阅读