我无法在引导行中居中图像答案

【问题标题】：i can't center image in bootstrap row我无法在引导行中居中图像
【发布时间】：2020-08-27 18:25:58
【问题描述】：

这是我的代码：图像不在顶部和底部居中，我尝试了所有谷歌方法。我添加了 img-fluid 和 img-thumbnail 都使用了 my-auto 。正常边距，如边距：10% 工作仅自动不工作。

 <div class="intro">
       <div class="row">
        <div class="col-10 col-md-12 col-lg-6">   
        <img class=" img-fluid " src="./img/l-intro-img.jpg" alt="l-intro-img"/>
      </div>
      <div class="col-12 col-md-12 col-lg-6">
        <h1>Random text</h1>
      </div>
    </div>
    </div>

.intro {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url(../img/bg-intro.svg);
  background-position: center;
  background-size: auto;
}

.img-fluid {
  display: block;
  margin: auto 0px;
}

【问题讨论】：

这能回答你的问题吗？ How can I center an image in Bootstrap?

标签： html css bootstrap-4

【解决方案1】：

解决您的问题：

.intro {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url(https://source.unsplash.com/random/560x560);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.img-fluid {
  display: block;
  margin: auto 0px;
}

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>

<body>
  <div class="intro">
    <div class="row">
      <div class="col-md-12 col-lg-6  d-flex justify-content-center align-items-centerr">
        <img class=" img-fluid" src="https://via.placeholder.com/150x154" alt="l-intro-img" />
      </div>
      <div class="col-md-12 col-lg-6 text-center">
        <h1 class="text-white">Random text</h1>
      </div>
    </div>
  </div>
</body>

你可能想在jsfiddle找到这个

【讨论】：

【解决方案2】：

您在背景中使用图像，因此您必须更具体地使用您正在使用的 div 大小和图像大小，为避免此问题，请使用这两个属性 1* 背景位置 x:50%; 2* 背景位置-y:50%;

【讨论】：

在 .intro 类中都添加了，但边距自动不起作用

【解决方案3】：

使用background-size: contain; 对齐中心。

.intro {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url(../img/bg-intro.svg);
  background-position: center;
  background-size: contain;
}

请在图片上方的 div 中包含 mx-auto text-center 类。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="intro">
   <div class="row">
    <div class="col-10 col-md-12 col-lg-6 mx-auto text-center">   
      <img class="img-fluid " src="https://i.stack.imgur.com/quhig.png" alt="l-intro-img"/>
    </div>
    <div class="col-12 col-md-12 col-lg-6 text-center">
      <h1>Random text</h1>
    </div>
</div>
</div>

【讨论】：

我需要居中 img-fluid 图像
现在试试演示兄弟:)