CSS将图片与文字对齐

Question

我如何设置样式，以便图像可以内联？我认为这是由“社区服务”文本中的断行引起的。感谢您的提前帮助！

PS：还有一个问题，是否可以在不使用displayCategories中的text-align：center元素的情况下对齐我当前在中间的东西？因为我想增加一些句子，但我不希望将其集中化。

我的HTML代码：

#displayCategories {
  background-color: #FAFAFF;
  text-align: center;
}

#displayCategories .imgSlot {
  padding: 50px;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

.caption {
  display: block;
  font-weight: bold;
  padding-left: 5px;
}

<div id="displayCategories">
  <div class="imgSlot">
    <img src="img/cateIcon.png" />
    <span class="caption">Amenities</span>
  </div>
  <div class="imgSlot">
    <img src="img/cateIcon.png" />
    <span class="caption">Attractions</span>
  </div>
  <div class="imgSlot">
    <img src="img/cateIcon.png" />
    <span class="caption">Community<br />&nbsp;&nbsp;Services</span>
  </div>
  <div class="imgSlot">
    <img src="img/cateIcon.png" />
    <span class="caption">Environment</span>
  </div>
  <div class="imgSlot">
    <img src="img/cateIcon.png" />
    <span class="caption">Education</span>
  </div>
</div>

Answer 1

在您的vertical-align:top类中使用imgSlot来对齐图像的顶部。默认情况下，inline-block个元素与baseline对齐：https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

  #displayCategories {
    background-color:#FAFAFF;
    text-align:center;
  }

  #displayCategories::after{
    content: "";
    clear: both;
    display: table;
  }

  #displayCategories .imgSlot {
    padding: 50px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    /*New Attribute*/
    vertical-align:top;
  }

  .caption {
    display:block;
    font-weight: bold;
    padding-left:5px;
  }

<div id="displayCategories">
  <div class="imgSlot">
    <img src="img/cateIcon.png" />
    <span class="caption">Amenities</span>
  </div>
  <div class="imgSlot">
    <img src="img/cateIcon.png" />
    <span class="caption">Attractions</span>
  </div>
  <div class="imgSlot">
    <img src="img/cateIcon.png" />
    <span class="caption">Community<br />&nbsp;&nbsp;Services</span>
  </div>
  <div class="imgSlot">
    <img src="img/cateIcon.png" />
    <span class="caption">Environment</span>
  </div>
  <div class="imgSlot">
    <img src="img/cateIcon.png" />
    <span class="caption">Education</span>
  </div>
</div>

Answer 2

执行此操作的另一种方法是给#displayCategories容器一个NSLocalizedString("MyButton", comment: "") ，并加上display:flex。然后从.imgSlot中删除justify-content: center和margin-left:auto声明：

margin-right:auto

img{
  max-height:50px;
}

#displayCategories {
    background-color:#FAFAFF;
    text-align:center;
    display:flex;
    justify-content:center;
  }

  #displayCategories .imgSlot {
    padding: 50px;
    display: inline-block;
  }

  .caption {
    display:block;
    font-weight: bold;
    padding-left:5px;
  }