时间戳

首页 > 解决方案 > 在引导程序中的 div 元素内居中图像

html - 在引导程序中的 div 元素内居中图像

问题描述

我使用引导程序，我想知道为什么当我将最大宽度应用于图像时，它不考虑文本中心并且是分散的。只需删除最大宽度以使其再次居中。

<div class="img-rsa g-4 align-self-center text-center">

  <img src="img/aluno-rsa.jpg" alt="" class="img-fluid" style="border-radius:100%">

</div>

.img-rsa {
    width: 100%;
    max-width: 350px;
    display: block;
}

标签： htmlcssimagetwitter-bootstrapdisplay

解决方案

您需要将宽度设置应用于图像。

.img-fluid {
  width: 100%;
  max-width: 350px;
  height: auto: // You need to add this
  display: block;
}

然后由于图像现在是块状的，您可以使用边距自动将其居中。或者您可以保持图像内联并使用文本对齐将其居中。

推荐阅读