如何在html中正确对齐文本

Question

我试图将文本对齐，就像第一行一样，但第二行仍然在图像下方溢出。无论行数如何，如何正确对齐文本？

<a href="javascript:;" id="A_3"><i id="I_4"></i></a><span id="SPAN_5">     
</span>
<h5 id="H5_6">Payroll</h5>
    <p id="P_7">
        What what everytrksdjfsdf sdmnb fsdmnb sd xcmnvb xcm mbb mvcn bcvxmcnbv</p>

请查看jsbin：

编辑：我看到Safari（1）正确显示，但Google Chrome（2）不是。

Answer 1

从这两个元素中删除box-sizing: border-box;。同时将width: 457.5px;添加到#H5_6

检查以下代码。

#A_3 {
  float: right;
  height: 65px;
  text-align: center;
  width: 65px;
  background: rgb(153, 153, 153) none repeat scroll 0% 0% / auto padding-box border-box;
  border-radius: 50% 50% 50% 50%;
  font: normal normal normal normal 35px / 50px'Open Sans', arial, sans-serif;
}
/*#A_3*/

#H5_6 {
  text-align: right;
  width: 457.5px;
}
/*#H5_6*/

#P_7 {
  color: rgb(95, 95, 95);
  height: 56px;
  text-align: right;
  width: 457.5px;
  font: normal normal 300 normal 16px / 30.8px'Open Sans', arial, sans-serif;
}
/*#P_7*/

<a href="javascript:;" id="A_3"><i id="I_4"></i></a><span id="SPAN_5"></span>
<h5 id="H5_6">
			Payroll
		</h5>
<p id="P_7">
  What what everytrksdjfsdf sdmnb fsdmnb sd xcmnvb xcm mbb mvcn bcvxmcnbv What what everytrksdjfsdf sdmnb fsdmnb sd xcmnvb xcm mbb mvcn bcvxmcnbv
</p>

Answer 2

http://jsbin.com/qigitoyeyo/1/edit?html,css,output

你可以设置＆＃34; margin-right：115px;＆＃34;在＆lt; p＆gt;上标签

这样您就不必手动设置高度和宽度。

Answer 3

我通过添加

修复了它

margin: 0px 25px 80px;

到A_3元素（自举圈）

非常感谢你的帮助！