我不知道为什么我会为看似如此简单的事情而苦苦挣扎。现在我有一个使用全 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;
}
最佳答案
柔性盒技术最适合您的解决方案。使用此方法不需要为其定义固定宽度。
查看 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>
关于html - 移动页面全 Angular - 带图标的居中文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31740911/