Question

我想将图像放在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设置在一个中心之下。

Answer 1

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

Answer 2

对于单个元素，将文本居中放置在类中

（class =“ Text-Center”）

用于行元素

（class =“ row justify-content-center”）

如何使用引导程序将div标签中的元素居中

2 个答案: