html - 对齐图片旁边的文本

Question

如何对齐下图中的文字？

 <div id="contact-info">
                    <div id="contact-list">
                        <div id="adresa">

                             <img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/ADRESA.png"  style="width:22px;height:31px;float:left;">      
                             <p style="text-align:center;">Calea Dorobantilor,nr.74</p>
                             <p style="text-align:center;">,bl.Y9,SC.2,Ap.25,Cluj-Napoca,400609,Romania</p>

                         </div
                        <div id="telefon"></div>
                        <div id="mail"></div>
                    </div>

              </div>

#contact-info
{
width:300px;
height:300px;
background:url(images/BODY-CONTACT.png);
position:absolute;
right:0;


}

我该如何解决这个问题？未能如我所愿修复

www.avocat.dac-proiect.ro/wp

Answer 1

通常，您应该使用 div 来嵌套元素，以便以合适的方式对齐它们。还要注意display:block或 inline .您可以在 W3C 文档中阅读更多内容。我对这个问题的处理如下:

<div id="adresa">
  <div id="addPadding" style="
    padding: 2em;">
    <img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/ADRESA.png" style="width:22px;height:31px;float:left;display: inline;">
  <div style="
    float: right;
    display: inline;
    width: 80%;
">
 <p style="text-align:left;">Calea Dorobantilor,nr.74,</p>
 <p style="text-align:left;">bl.Y9,SC.2,Ap.25,<br>Cluj-Napoca,400609,
<br>Romania</p>
  </div>

   </div>
</div>

我用了 2 <div> , 一包二<p>另一个包裹 <img>和新的 ''(或者您可以简单地在 <div id="adresa"> 上添加填充)。

它会得到与您的模型更相似的布局结果，我希望我能为您截屏。

你只需要修复 text-align:left和 margin <p>标记以完成您的工作。