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

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

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

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

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

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

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

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

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

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

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

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com

特别注意：本站所有转载文章言论不代表本站观点！

本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。

html文字于图片齐平,CSS控制图片和文字在同一行对齐显示相关推荐

html文字图片同一行,CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见欢思 ...
html图片等比例拉伸,CSS控制图片等比例缩放
我们经常会需要把用户上传的图片等比例缩放在我们的网页上显示,下面我来介绍利用css控制图片比例缩放与javascript实现的方法,有需要了解的朋友可参考参考. 按比例缩小或者放大到某个尺寸,对于标准 ...
html背景图片的隐藏,CSS隐藏图片背景上方的文字内容
使用CSS样式隐藏图片作为背景图片上方的文字内容此类问题我们常见于LOGO处使用,我们想让图片作为背景,而图片上方放A链接文字内容,但html锚文本功能仍然正常也能鼠标点击使用. 一.用到的CSS单 ...
css 控制图片的横竖比例
大概你也遇到过"图片高度是宽度50%"这的需求这需求看起来简单, 其实却非常麻烦因为元素的宽高的百分比是相对于父元素的宽高计算的所以直接设 width, height 是不符 ...
html怎么设置扩大缩小不变形,DiV里CSS控制图片按比例扩大缩小不变形
一般来说,我们设定一定宽度高度的div标签,在里面放上图片,只有当图片大小尺寸符合这个宽度和高度的时候显示最佳.那有的时候不同的界面,同样的信息(比如头像)放大的尺寸是不一样,怎么才能让图片根据DIV ...
html不换行溢出省略号代替,css控制不溢出,不换行,溢出部分省略号显示
css控制不溢出,不换行,溢出部分省略号显示:white-space:nowrap;text-overflow:ellipsis;overflow:hidden; ext-overflow 取值: c ...
vue项目对要显示的富文本数据中的图片处理----去掉或控制图片大小
一.去掉图片标签 let informationArticle = informationArticle.replace(/<\/?(img)[^>]*>/gi, ''); 利用正则 ...
css控制图文混排、图文自适应容器显示的效果
闲来无聊,写了一个css控制图文混排.图文自适应容器显示的效果. 下面js,是鼠标拖动div缩放大小的代码, 跟样式无关,目的是展示自适应效果. 留存参考: <!DOCTYPE html /&g ...
CSS控制图片大小、边框、对齐方式、文字环绕
CSS操作图片大小 width属性和height属性可以用于定义图片大小. width属性和hieght属性的属性值都是像素. CSS操作图片边框 border-width属性用于定义<img& ...

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

html文字于图片齐平,CSS控制图片和文字在同一行对齐显示相关推荐

最新文章

热门文章