如何在柔性显示中居中图像？答案

【问题标题】：How can I center images in flex display?如何在柔性显示中居中图像？
【发布时间】：2021-08-26 07:05:22
【问题描述】：

所以我是一名正在接受培训的新开发人员。我已经在网站上工作了一段时间作为练习，但是尽管我尝试了一切，但我的图像不会居中。我正在运行的代码也与我正在观看的教程完全相同，并且这些家伙的图像排列完美。我将上传我网站的图片。

这是我的网站预览。这三个图像是未居中的。

.features {
    padding: 20px;
    display: flex;
    flex-direction: row;
    color: grey;
}


.features figure {
    margin: auto;
    width: 100px;
}

.features figure img {
    width: 200px;
    border: 1px solid rgb(196, 196, 196);
    border-radius: 10px;
    box-shadow: rgb(0, 0, 0) 0px 0px 10px;
}

    <section class="features">
        
        <figure>
            <img src="https://via.placeholder.com/100"alt="E Girl Skin">
            <figcaption>Skin Uno Mununo</figcaption>
        </figure>
        <figure>
            <img src="https://via.placeholder.com/100" alt="Mario Skin">
            <figcaption>Skin Dosos</figcaption>
        </figure>
        <figure>
            <img src="https://via.placeholder.com/100" alt="E Boy Skin">
            <figcaption>Skin Treses</figcaption>
        </figure>
    </section>

【问题讨论】：

在我看来您的图像是居中的。也许修改以更好地描述你想要完成的事情。另外，为什么你的图片大小是它们的图形容器的两倍？
...它们没有居中... 如您所见，方向盘侧与网页侧的边距大于右图与网页侧的边距。

标签： html css image

【解决方案1】：

body {
    background-color: rgb(0, 0, 0);
    background: url("Grey-Gradient-Background.jpg");
    margin: 0;
    padding: 0;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
header {
    background: rgb(0, 0, 0);
    color: rgb(0, 0, 0);
    margin: 0px;
    background-image: url("Blue-Bg-Header.jpeg");
    padding-top: 10px;
    padding-bottom: 2px;
    padding-left: 20px;
    padding-right: 20px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

footer {
    background: rgb(0, 0, 0);
    color: white;
    margin: 0px, 0px, 0px, 0px;
}

nav ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    height: 0px;
    margin-top: 30px;
    text-align: center;
}

nav li {
    display: inline-block;
    padding: 20px;
    padding-top: 5px;
    margin: 0px;
}

.features {
    padding: 20px;
    display: flex;
    flex-direction: row;
    color: grey;
}

.features figure {
    margin: auto;
    width: 100px;
}

.features figure{
    width: 200px;
    border: 1px solid rgb(196, 196, 196);
    border-radius: 10px;
    box-shadow: rgb(0, 0, 0) 0px 0px 10px;
    text-align: center;
}
.figImg{object-fit: contain;width: 200px;border-radius: 10px 10px 0 0;}

header .logo a {
    /* background: url("Novak_Skinz-Removebg-crop.png"); */
    display: inline-block;
    width: 300px;
    height: 160px;
    /* text-indent: -99999999px; */
    background-repeat: no-repeat;
    background-size: 300px;
    position: relative;
    top: -20px;
    color: white;
}

h1 {
    margin-bottom: 10px;
}

/* unvisited link */
a:link {
    /* color:black; */
    color: white;
  }
  
  /* visited link */
  a:visited {
    color: rgb(0, 0, 0);
  }
  
  /* mouse over link */
  a:hover {
    color: rgb(77, 77, 77);
  }
  
  /* selected link */
  a:active {
    color: rgb(0, 0, 0);
  }

  a {
      text-decoration: none;
  }

  a {
      font-weight: bold;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <link rel=stylesheet href="styles.css"> 
    <link rel="stylesheet" href="E:\Microsoft VS Code-Folder\new.css"> 
</head>

    <header>
        <nav>
             <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="About Me.html">About Me</a></li>
                <li class="logo"><a href="index.html">Novakron Logo</a></li>
                <li><a href="Pricing.html">Pricing</a></li> 
                <li><a href="Contact Me.html">Contact Me</a></li>
             </ul>
        </nav>
        <h1>Home</h1>
    </header>   
    <section class="features">
        
        <figure>
            <img src="#" alt="E Girl Skin" class="figImg">
            <figcaption>Skin Uno Mununo</figcaption>
        </figure>
        <figure>
            <img src="3" alt="Mario Skin"  class="figImg">
            <figcaption>Skin Dosos</figcaption>
        </figure>
        <figure>
            <img src="3" alt="E Boy Skin" class="figImg">
            <figcaption>Skin Treses</figcaption>
        </figure>
    </section>

<footer>
Contact me @NovakSkinz@gmail.com OR 555-999-3333
</footer>

【讨论】：

【解决方案2】：

在.features中，添加：

justify-content: center;
align-items: center;

应该这样做！ LMK（“让我知道”）否则。

【讨论】：

Lmk 是英语中“让我知道”的常用文本语言，经常出现在互联网论坛中！如果你愿意，我可以格式化code，我只是假设这两行很容易通过间距来辨别。如果没有，请道歉。