Html 接触栏中的图像和文本

好的，这样做的理想结果是将图像放在左边，文本放在图像的右边，屏幕截图如下：

。请与工具栏联系{
宽度：100%；
高度：50px；
背景#2c3e50；
颜色：#ffffff；
边框底部：实心2px#c9c9c9；
}
.联系酒吧和集装箱{
宽度：1050px；
高度：50px；
位置：相对位置；
左边距：自动；
右边距：自动；
}
.联系方式\u栏\u文本{
宽度：100%；
}
.联系酒吧电话{
背景图片：url（/images/call.png）；
高度：32px；
宽度：32px；
浮动：左；
边缘顶部：8px；
浮动：左；
右边距：100px；
}
。请通过电子邮件联系{
背景图片：url（/images/email.png）；
高度：32px；
宽度：32px；
浮动：左；
边缘顶部：8px；
}

打电话来
在此处发送电子邮件

这里有一个解决方案，使用img html标记代替背景图像。我编辑了一点你的html代码

因此，您只需使用

标记，而不是

。请与工具栏联系{
宽度：100%；
高度：50px；
背景#2c3e50；
颜色：#ffffff；
边框底部：实心2px#c9c9c9；
}
.联系酒吧和集装箱{
宽度：1050px；
高度：50px；
位置：相对位置；
左边距：自动；
右边距：自动；
显示器：flex；
对齐项目：居中；
}
.联系内容{
显示器：flex；
对齐项目：居中；
填充：0 15px；
}
.联络你的形象{
高度：15px；
宽度：15px；
背景色：红色；
右边距：5px；
}

打电话来
在此处发送电子邮件

这里有一个解决方案，使用img html标记代替背景图像。我编辑了一点你的html代码

因此，您只需使用

标记，而不是

。请与工具栏联系{
宽度：100%；
高度：50px；
背景#2c3e50；
颜色：#ffffff；
边框底部：实心2px#c9c9c9；
}
.联系酒吧和集装箱{
宽度：1050px；
高度：50px；
位置：相对位置；
左边距：自动；
右边距：自动；
显示器：flex；
对齐项目：居中；
}
.联系内容{
显示器：flex；
对齐项目：居中；
填充：0 15px；
}
.联络你的形象{
高度：15px；
宽度：15px；
背景色：红色；
右边距：5px；
}

打电话来
在此处发送电子邮件

使用左边的填充。联系\u bar\u电子邮件和。联系\u bar\u callIn出于某种原因这样做复制了图像。。。如果不希望复制图像，可以添加

背景重复：无重复

。但是也许你可以用一个img的html标签来代替背景图片，这样会更容易，我该如何将文本对齐到图片的右边呢@VictorAllegretuse背景位置：左侧，背景重复：无重复；使用左边的填充。联系\u bar\u电子邮件和。联系\u bar\u callIn出于某种原因这样做复制了图像。。。如果不希望复制图像，可以添加

背景重复：无重复

。但是也许你可以用一个img的html标签来代替背景图片，这样会更容易，我该如何将文本对齐到图片的右边呢@VictorAllegretuse背景位置：左侧，背景重复：无重复；