将 3 个图像与文本对齐答案

【问题标题】：Aligning 3 images with text将 3 个图像与文本对齐
【发布时间】：2021-08-03 05:22:11
【问题描述】：

我对 CSS 相当缺乏经验，但不得不修复一些问题并且找不到完全正确的答案，所以我来了！

基本上，我正在尝试在右侧添加 3 个带有文本的图像，文本中心与每个图像对齐。我一直在滚动浏览各种块/显示模式，但显然我做错了什么。

这是我目前拥有的 HTML：

<div id="store-info">
<img style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/0565/3073/1187/files/footer_icons_01.png?v=1620843727">TEL: 000-00000-000
<img style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/0565/3073/1187/files/footer_icons_03.png?v=1620843727"><a href="/account/login" title="/account/login">TRACK PACKAGE</a><img style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/0565/3073/1187/files/footer_icons_05.png?v=1620843727"><a href="/pages/contact-us" title="/pages/contact-us">EMAIL US</a>
</div>

生成以下内容：https://nimb.ws/JVojrA

抱歉，我基本上是在黑暗中刺穿各种显示/阻止选项，无处可去。

【问题讨论】：

您在询问您的 CSS，但您没有向我们展示任何内容。请修改您的帖子以创建一个完整的 sn-p 来演示该问题。到其他网站的链接是不够的。
这样的？ codepen.io/cjhaas/pen/PopZRjx
是的，完美，会试一试 - 我有一些东西可以工作，但必须使用 max-height 感觉不对！

标签： html css layout shopify

【解决方案1】：

听起来您正在寻找类似的东西。 Flex 是一种很好的方式。

#store-info {
  display: flex;
  flex-direction:column;
  
}
#store-info img {
  width: 100px;
}
#store-info img, #store-info a,  #store-info span {
  margin-left: 5%;
  margin-bottom: 5%;
}

.items{
display:flex;
align-items:center;
}

<div id="store-info">
<div class='items'>
   <img style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/0565/3073/1187/files/footer_icons_01.png?v=1620843727">
   <span>TEL: 000-00000-000</span>
 </div>
 <div class='items'>
  <img style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/0565/3073/1187/files/footer_icons_03.png?v=1620843727">
   <a href="/account/login" title="/account/login">TRACK PACKAGE</a>
</div>
<div class='items'>
  <img style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/0565/3073/1187/files/footer_icons_05.png?v=1620843727">
  <a href="/pages/contact-us" title="/pages/contact-us">EMAIL US</a>
</div>
</div>

【讨论】：

谢谢！实际上，我确实提出了以下看起来不错且相似的方法，但我会尝试您的建议，因为最大高度感觉像是以某种方式作弊。 ``` #store-info { 显示：弹性；对齐项目：居中；最大高度：84px； } .rte img {padding-right: 8px;}

【解决方案2】：

添加 CSS“Flex”和“Flew-flow”就可以了；

但是，我建议您查看 Bootstrap “flex” 和 “Grid System” 以获得更多详细信息； Bootstrap Grid System

#store-info {
  display: flex;
  flex-flow: column;
}
#store-info img {
  width: 100px;
}
#store-info img, #store-info a,  #store-info span {
  margin-left: 5%;
  margin-bottom: 5%;
}

<div id="store-info">
   <img style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/0565/3073/1187/files/footer_icons_01.png?v=1620843727"><span>TEL: 000-00000-000</span>
  
  <img style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/0565/3073/1187/files/footer_icons_03.png?v=1620843727">
   <a href="/account/login" title="/account/login">TRACK PACKAGE</a>

  <img style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/0565/3073/1187/files/footer_icons_05.png?v=1620843727">
  <a href="/pages/contact-us" title="/pages/contact-us">EMAIL US</a>
</div>

【讨论】：

谢谢！我以类似的解决方案结束，但会尝试您的建议，因为我认为我的解决方案有点粗糙！