将 3 个图像与文本对齐

Question

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

基本上，我试图在的右侧添加 3 张带有文本的图像，文本中心与每张图像对齐。我坐着滚动浏览各种 block/display 模式，但显然我做错了什么。

这是我目前的 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

很抱歉，我基本上是在黑暗中摸索各种 display/block 选项，却无处可去。

Answer 1

添加 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>

Answer 2

听起来您正在寻找类似的东西。 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>

将 3 个图像与文本对齐

Aligning 3 images with text

html

css

layout

shopify