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

注意：这不是整个解决方案。我刚刚告诉你应该采用什么方法。

这很简单......为此，您需要制作<p>和<img> position: absolute;。如下所示

.centered {
   position: absolute;
   right: 12px;
   top: 110px;
}

并将课程添加到p和img

<p class="centered">....</p> <img class="centered" src="...." />

尝试使用每个top和`img。

的不同right和p值

Answer 2

通常，您应该使用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>和新的＆＃39;＆＃39; （或者您只需在<div id="adresa">上添加填充。）

它将为您的模型获得更类似的布局结果，我希望我能为您拍摄屏幕截图。

您只需修复text-align:left标记上的<p>和保证金即可完成工作。

Answer 3

虽然CSS纯粹主义者不会告诉你，但我只想添加一个表

<table>
    <tr>
         <td>
             <img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/ADRESA.png"  style="width:22px;height:31px;">
         </td>
         <td valign="top">
             <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>
         </td>
    </tr>
</table>

对齐图片旁边的文字

3 个答案: