Question

我不知道为什么我会挣扎着看似简单的事情。现在我有一个移动页面（也可以在桌面上查看），它使用全宽布局。

在其中，我只想将我的文字（不确定的大小）和一个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

的浏览器兼容性表

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

1 个答案: