零基础学做网站培训介绍

当前位置:

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

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

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

图片与文字对齐有二种情况:

情况一:图片与一段文字对齐

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

这是通过CSS来控制图片与一个段落顶部对齐,方法见:CSS控制图片与一段文字顶部对齐

情况二:CSS控制图片和单行文字对齐显示

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

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

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


<img src="logo.jpg" alt="" style="vertical-align:middle"><a href="">找回密码</a>

这样我们在建网站过程中,就可以使用vertical-align属性来控制图片与单行文字对齐。

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

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 通过网页制作教程上节课怎样在网页中添加表格,我们就可以在网页中插入一个表格,但往往插入的表格并不美观,我们需要设置一些表格参数去达到我们要求
  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • 欢迎大家学习学做网站论坛的CSS视频教程,这节课程我们讲一下如何使用一个CSS样式来控制多个DIV。在网页制作过程中,写CSS追求代码简洁,如果多个
  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • HTML文字倾斜标签是什么 (122598 次浏览)
    HTML文字倾斜标签是什么?我们在做网站时,有的文字需要倾斜显示,这时就需要使用HTML文字倾斜标签了。HTML斜体标签:HTML 斜体标签元素知识与
  • 图片与文字是做网站必不可少的要素,我们在使用图片与文字布局时,如何让图片和文字在同一行对齐显示来制作出一个整齐的网页出来。对于一些学做网
  • 每个主体(个人或企业)注册域名的数量不受限制,同一个网站也可以注册多个不同的域名。(如果你不知道怎么注册域名,可以参考此教程:如何购买域名和
  • 在Dreamweaver cs5中,当我们点击HTML网页中的图片时,可以设置图片与文字的混排对齐方式。但在Dreamweaver CS6破解版版本中,软件已经取消了这个对齐
  • 在我们学做网站的过程中,通过图片的后缀名我们很轻松的了解图片是什么格式的,想要替换的时候,很就简单了。但有的同学的电脑里的图片等文件并没
  • 很多同学在模板制作的过程,都有图片调用不出来的现象,其实原因很简单,就是图片路径错误造成的。这里涉及到html和css中的一些路径知识,这个视