为什么我的图像无法在CSS上水平对齐

问题描述

嗨，我的网站上有6张图像，这些图像垂直堆叠，但我希望它们水平堆叠并居中对齐。其中的4张图片也有标题，我需要在每张图片下方显示...可以有人帮忙吗谢谢

这是我的html：

  <div class="container-fluid">

    <div class="container-of-images">
      <img src="chick2.png">

      <figure>
        <img id="img1" src="dice6.png">
        <figcaption>Testing</figcaption>
      </figure>

      <figure>
        <img id="img2" src="dice6.png">
        <figcaption>Testing</figcaption>
      </figure>

      <figure>
        <img id="img3" class="threeChoices" src="dice6.png">
        <figcaption>Testing</figcaption>
      </figure>

      <figure>
        <img id="img4" class="fourChoices" src="dice6.png">
        <figcaption>Testing</figcaption>
      </figure>
      <img src="chick1.png">
    </div>
  </div>

这是我的CSS：

body {
  background-color: #b6e6bd;
  line-height: 1.6;
}

.container-fluid {
  padding: 1% 20%;
  margin: auto;
  text-align: center;
}

img {
  width: 100px;
  line-height: 0;
  margin: 0 1%;
  display: flex;
  justify-content: center;
}

figcaption {
  text-align: center;
  width: 100px;
}

解决方法

使图像容器具有一个flex元素，该元素可将内容连续排列：

.container-of-images {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

,

您需要添加付款方式：内联；或支付：内联封锁；到您的CSS。

body {
  background-color: #b6e6bd;
  line-height: 1.6;
}

.container-fluid {
  padding: 1% 20%;
  margin: auto;
  text-align: center;
}

img {
  width: 100px;
  line-height: 0;
  margin: 0 1%;
  display: flex;
  justify-content: center;
  display: inline;
}

figcaption {
  text-align: center;
  width: 100px;
}

,

您尝试在容器上使用flexbox吗？试试这个：

.container-of-images {
    display: flex;
}

,

尝试此CSS代码，我发现的问题是显示：应该使用inline-block而不是flex。

 

        body {
            background-color: #b6e6bd;
            line-height: 1.6;
        }

        .container-fluid {
            margin: auto;
            text-align: center;
            width:100%;
        }

        img {
            width: 100px;
            line-height: 0;
            margin: 0 1%;
            display: inline-block;
            justify-content: center;
            vertical-align: middle;
        }

        figcaption {
            text-align:
                center;
            width: 100px;
        }

        figure {
            display: inline-block;vertical-align: middle;
        }
    

,

根据您的情况，如果您将CSS属性display:flex添加到container-of-images类，它将解决您的问题。但是您可以解决，请注意它的响应式设计。

.container-of-images {
    display: flex;
    flex-direction: row; /* extra line flex alone can solve your problem */
    justify-content: space-around; /* extra line to space images around */
}