在同一行上对齐文本和图像，同时保持相对于容器大小的文本缩进答案

【问题标题】：Alignning text and image on same line while maintaining text indent relative to the container size在同一行上对齐文本和图像，同时保持相对于容器大小的文本缩进
【发布时间】：2016-08-23 04:33:43
【问题描述】：

我搜索了有关 stackoverflow 的问题，但我尝试过的问题都没有。他们中的大多数扭曲了我真正想要实现的目标。我想知道我哪里出错了或者我错过了什么。

我尝试的一些链接是： CSS align images and text on same line、Image and text on same line?等

我尝试并删除了它们。我正在展示我自己取得的成就。

我想达到什么目标？

1) 我希望文本自动调整大小，即使容器大小发生变化。
2) 当文本调整大小时，它应该保持缩进。
示例：

|img|--|文本行 1|
|文本行 2|

注意： 我使用字体真棒图标集作为图像。

更新： Paulie_D 回答有效，但没有响应。检查http://design.google.com/resizer/#device=handset&url=http%3A%2F%2Fhungry.pe.hu%2Fhelp&width=720

#org_info_container {
  background-color:#FFFFFF;
  border: 1px #CCCCCC solid;
  -moz-box-shadow: 0px 0px 2px #C0C0C0;
  -webkit-box-shadow: 0px 0px 2px #C0C0C0;
  box-shadow: 0px 0px 2px #C0C0C0;
  margin-right: 5%;
  margin-top:20px;
  width:28%;
  float:right;
} 
#org_info_details {
  padding-left: 10px;
  padding-right: 10px;
  font-family: 'Montserrat';
  font-size: 14px;
}
.group {
  margin-bottom: 20px;
}
.icon {
  color: #ED734F;
  margin: 3%;
  display: inline;
}
.text {
  display: inline;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<div id="org_info_container">
<div id="org_info_details">

  <div class="group">
    <div class="icon"><i class="fa fa-envelope-o fa-lg fa-fw">&nbsp;&nbsp;</i>
    </div>
    <div class="text"><a href="mailto:support@hungry.pe.hu" class="help">support@hungry.pe.hu</a>&nbsp;&nbsp;|&nbsp;Email us</div>
  </div>

  <div class="group">
    <div class="icon"><i class="fa fa-phone fa-lg fa-fw">&nbsp;&nbsp;</i>
    </div>
    <div class="text"><a href="tel:9836345939" class="help">XXXXXXXXXX</a>&nbsp;&nbsp;|&nbsp;Call us</div>
  </div>

  <div class="group">
    <div class="icon"><i class="fa fa-map-marker fa-lg fa-fw">&nbsp;&nbsp;</i>
    </div>
    <div class="text"><strong>505, Phulpukur Road, Chinsurah, Hooghly, 712101</strong>&nbsp;&nbsp;|&nbsp;Main Office</div>
  </div>

</div>
</div>

【问题讨论】：

标签： css image responsive-design font-awesome text-alignment

【解决方案1】：

绝对定位

将.icon div 绝对定位在.group 容器的一些填充内。

我在这里限制了正文宽度以显示行为。

body {
  margin: 1em 10em;
  /* to show behaviour */
}
#org_info_details {
  padding-left: 10px;
  padding-right: 10px;
  font-family: 'Montserrat';
  font-size: 14px;
}
.group {
  margin-bottom: 20px;
  padding-left: 2em;
  position: relative;
}
.icon {
  color: #ED734F;
  position: absolute;
  left: 0;
}
.text {
  display: inline;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<div id="org_info_details">

  <div class="group">
    <div class="icon"><i class="fa fa-envelope-o fa-lg fa-fw">&nbsp;&nbsp;</i>
    </div>
    <div class="text"><a href="mailto:support@hungry.pe.hu" class="help">support@hungry.pe.hu</a>&nbsp;&nbsp;|&nbsp;Email us</div>
  </div>

  <div class="group">
    <div class="icon"><i class="fa fa-phone fa-lg fa-fw">&nbsp;&nbsp;</i>
    </div>
    <div class="text"><a href="tel:9836345939" class="help">XXXXXXXXXX</a>&nbsp;&nbsp;|&nbsp;Call us</div>
  </div>

  <div class="group">
    <div class="icon"><i class="fa fa-map-marker fa-lg fa-fw">&nbsp;&nbsp;</i>
    </div>
    <div class="text"><strong>505, Phulpukur Road, Chinsurah, Hooghly, 712101</strong>&nbsp;&nbsp;|&nbsp;Main Office</div>
  </div>

或弹性盒

body {
  margin: 2em 10em;
}
#org_info_details {
  padding-left: 10px;
  padding-right: 10px;
  font-family: 'Montserrat';
  font-size: 14px;
}
.group {
  margin-bottom: 20px;
  padding-left: 2em;
  display: flex;
}
.icon {
  color: #ED734F;
}
.text {
  display: inline;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<div id="org_info_details">

  <div class="group">
    <div class="icon"><i class="fa fa-envelope-o fa-lg fa-fw">&nbsp;&nbsp;</i>
    </div>
    <div class="text"><a href="mailto:support@hungry.pe.hu" class="help">support@hungry.pe.hu</a>&nbsp;&nbsp;|&nbsp;Email us</div>
  </div>

  <div class="group">
    <div class="icon"><i class="fa fa-phone fa-lg fa-fw">&nbsp;&nbsp;</i>
    </div>
    <div class="text"><a href="tel:9836345939" class="help">XXXXXXXXXX</a>&nbsp;&nbsp;|&nbsp;Call us</div>
  </div>

  <div class="group">
    <div class="icon"><i class="fa fa-map-marker fa-lg fa-fw">&nbsp;&nbsp;</i>
    </div>
    <div class="text"><strong>505, Phulpukur Road, Chinsurah, Hooghly, 712101</strong>&nbsp;&nbsp;|&nbsp;Main Office</div>
  </div>

【讨论】：

如何在img的左边和text的右边赋予相等的边距？
不确定你的意思。
我的意思是两个图像靠近容器 div 边界。我希望他们多向内移动一点。
有时它会在调整浏览器大小时移出容器。
从 360 像素到 720 像素；它不适合容器。请帮忙。见design.google.com/resizer/…