html - 移动页面全 Angular - 带图标的居中文本

Question

我不知道为什么我会为看似如此简单的事情而苦苦挣扎。现在我有一个使用全 Angular 布局的移动页面(也可以在桌面上查看)。

在其中，我只想将我的文本(大小不确定)和一个 30x30 像素的图标居中。

<div id="contact-info">
    <div class="email">
        <div class="icon-left">
            <img src="image/mobile/message-dark.png" />
        </div>
        <div class="info-right">
            myverylongemailmyverylongemail@gmail.com
        </div>
    </div>
</div>

随着电子邮件在右边变长，我想增加宽度，但整个内容保持居中。

#contact-info {
    padding: 15px 0;
    color: #F7F8F8;
    font-size: 20px;
}

#contact-info .email {
    height: 48px;
    width: 300px;
    margin: 0 auto;
}

#contact-info .icon-left {
    width: 50px;
    height: 100%;
    float: left;
}

#contact-info .icon-left img {
    width: 30px;
    height: 30px;
}

#contact-info .info-right {
    min-width: 240px;
    height: 50%;
    padding-top: 10px;
    font-size: 12px;
    float: right;
}

Answer 1

柔性盒技术最适合您的解决方案。使用此方法不需要为其定义固定宽度。

查看 Flexbox 的浏览器兼容性表

#contact-info {
  padding: 15px 0;
  color: #F7F8F8;
  font-size: 20px;
}
#contact-info .email {
  height: 48px;
  display: flex;
  justify-content: center;
}
#contact-info .icon-left {
  width: 50px;
  height: 100%;
  float: left;
}
#contact-info .icon-left img {
  width: 30px;
  height: 30px;
}
#contact-info .info-right {
  min-width: 240px;
  height: 50%;
  padding-top: 10px;
  font-size: 12px;
  float: right;
  color: black;
}

<div id="contact-info">
  <div class="email">
    <div class="icon-left">
      <img src="http://placehold.it/30x30" />
    </div>
    <div class="info-right">
      myverylongemailmyverylongemail@gmail.com another 
email@gmail.com 
    </div>
  </div>
</div>