CSS控制图片和文字在同一行对齐显示

图片与文字是做网站必不可少的要素，我们在使用图片与文字布局时，如何让图片和文字在同一行对齐显示来制作出一个整齐的网页出来。

对于一些学做网站新手来说，图片和文字在同一行对齐显示却不是一件容易的事情，这主要是由于他们对CSS 的知识并不是太了解。（了解更多CSS知识，可学习DIV+CSS教程.）

CSS控制图片和文字在同一行对齐显示

默认情况下，一个区域内有一段文字和图片，文字与图片的对齐方式为底部对齐。如下图:

如果要文字与图片的顶部对齐，需要设置图片的垂直对齐属性vertical。可以在IMG标签中加入这个属性，并且把它的值设为top;

我们看到当一段文字，我们使用图片的垂直属性来控制图文对齐时，只能控制一段文字的第一行与图片的顶部对齐，而下面的文字却并没有与图片对齐，所以对齐属性vertical只适用于一行文字的对齐。

图片与一段文字顶部对齐的CSS写法

做网站时，往往是在一段文字中插入一张图片，我们如何让网站中的一段文字与图片顶部对齐呢？我们可以使用float属性。代码如下：

通过设置图片为左浮动，就可以让图片位于整个区域名的左边，文字处于图片的右边与图片的顶部对齐。还可以通过设置margin属性来设置图片与文字之间的距离。

相关教程：怎样在图片上写文字

标签： 代码 域名

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。