如何在引导程序的中心显示此图片？

问题描述

如何在引导程序的中心显示此图片？ 我是新手。谢谢。

<div class="form-row">
      <div class="form-group col-md-8 mx-auto"  id="fotodiv">
        <img src="img/lgo.png" class="img-fluid" >
      </div>

解决方法

也许尝试。对于使内容居中很有好处。

.form-group {
    display: grid;
    place-items: center;
  }

,

水平对齐

只需添加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="form-row">
    <div class="form-group col-md-8 mx-auto text-center"  id="fotodiv">
      <img src="https://i.stack.imgur.com/w0R2W.png" class="img-fluid" alt="oppo">
    </div>
<div>

垂直对齐和水平对齐

d-flex align-items-center justify-content-center

#fotodiv{
  height:250px;
}

<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="form-row">
    <div class="form-group col-md-8 d-flex align-items-center justify-content-center"  id="fotodiv">
      <img src="https://i.stack.imgur.com/w0R2W.png" class="img-fluid" alt="oppo">
    </div>
<div>

,

您可以将包含div用作弹性框，并使用flex-direction: column和justify-content: center进行垂直对齐：

#fotodiv {
  display: flex;
  height: 100vh; /*or 100% of your outer container*/
  flex-direction: column;
  align-items: center; /* horizontal alignment */
  justify-content: center; /* vertical alignment */
}

img {
  /* just to see the image's borders */
  border: 1px solid red;
}

<div class="form-row">
    <div class="form-group col-md-8 mx-auto"  id="fotodiv">
    <img src="img/lgo.png" class="img-fluid" >
</div>