使用html和css水平对齐图标和文本

Question

我正在尝试将框中的图标和文字对齐here：

我似乎无法获得＆＃34;商店定位器＆＃34;和图标水平对齐。

有人可以帮助我实现这个目标吗？

我的HTML：

<div id="container">
    <div id="phone" class="block">Phone</div>
    <div id="chat" class="block">Live Chat</div>
    <div id="email" class="block">Email</div>
    <div id="store-locator" class="block">
       <span class="store"></span> Store Locator <--- problem line
    </div>
</div>

Answer 1

尝试在此使用display:inline-flex

＆＃13;

＆＃13;

#container {
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
}

.block {
  width: 300px;
  height: 120px;
  margin: 10px;
  display: inline-flex;
  background: #3f3f3f;
  border-radius: 5px;
  font-size: 22px;
  align-items: center;
  justify-content: center;
}

#phone {
  color: yellow;
}

#chat {
  color: green;
}

#email {
  color: white;
}

#store-locator {
  color: grey;
}

.store {
  background: url(http://s1.archerssleepcentre.co.uk/i/sprite-2015.svg) no-repeat center left;
  background-position: -432px 2px;
  position: relative;
  right: 10px;
  background-size: 1800% auto;
  height: 32px;
  width: 32px;
  display: inline-block;
}

＆＃13;

<div id="container">
  <div id="phone" class="block">Phone</div>
  <div id="chat" class="block">Live Chat</div>
  <div id="email" class="block">Email</div>
  <div id="store-locator" class="block">
    <span class="store"></span> Store Locator
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;