html css怎么样才能css 把文字放在图片上的正下方

来源：蜘蛛抓取(WebSpider) 时间：2017-02-13 20:27 标签： css li文字在图片下方
图片上添加文字的两种常用方式
作者：佚名
字体：[ ] 来源：互联网 时间：02-24 11:34:55
图片上添加文字，常用的方式：将一张图片设置为背景，然后在里面加文字；加span标签，设置css样式；下面为大家介绍下
1.常用的方式是：将一张图片设置为背景，然后在里面加文字，你加入的图片代码是： 代码如下: &img src="img.jpg" width='100px" height="50px"& 改为 代码如下: &div style="background:url('img.jpg') no-width:100height:50px"&添加文字&/div& 2.一种是：加&span&标签，设置css样式，你加入的代码是： 代码如下: &div style="position: width: 170 height: 89"& &img src="图片地址" width="170" height="89" alt=""& &span style="position: top: 0; left: 0;"&添加文字...添加文字...添加文字...&/span& &/div&
大家感兴趣的内容
12345678910
最近更新的内容如何利用CSS代码使图片和文字在同一行显示且对齐
来源：博客园
对于初学的新手朋友来说，经常会遇到这样一个问题，当文字和图片出现在同一行或者同一个div里面的时候，在浏览器中运行出来的显示效果往往是在不同的行，那么，我们怎么才能利用使图片和文字在同一行显示且对齐呢？

对于这种现象，方法有3种：
1、通过添加css的“vertical-align:”；
2、如果图片是背景图片，可以在css中设置背景图片，然后设置文字的padding属性；
3、把文字和图片分别放入不同的div中。
经过多次的测试，上面三种方法都可以让图片和文字在同一行显示，下面马海祥就用实例来为大家操作一下：
1、在css中给div添加上“vertical-align:middle”属性
有些朋友会发现，如果一行内容中有图片有文字的话，文字往往会自动的底部对齐，影响美观，那如何让它们相对于呢，很简单，就是在图片和文字所在的行中添加：vertical-align:middle；这样，它们在同一行就会垂直居中对齐了。
在此，马海祥就用“注册、登陆、找回密码”这个在实际运用中经常遇到的情况还做实例，把“注册”和“登陆”做成图片，“找回密码”设置成文字。
html代码如下：

&div id="denglu"&　　&img src="reg.gif"&　　&img src="login.gif"&　　&a rel="nofollow" href="#"&找回密码&/a&　　&/div&



css代码如下:

#denglu *{　　vertical-align: /* 居中对齐， */　　font-size:14　　}



在浏览器中运行后的效果图如下：

使用css的“vertical-align:middle”属性让图片和文字在同一行对齐是一种非常常用的方法，也是比较利于和精简的一种方法（具体可查看马海祥博客《网站CSS代码优化的7个原则》的相关介绍），希望大家可以掌握。
2、把图片设置为背景图片
如果我们的图片本身是一个背景图片的话，可以在css中使用“background”来设置该图片，然后设置文字的padding属性就可以使他们在同一行显示了。
html代码如下：

&div id="denglu"&　　&div id="zhaohuimima"&&a rel="nofollow" href="#"&找回密码&/a&&/div&　　&/div&



css代码如下：

#denglu {　　background:url(login.gif) no-　　}　　#zhaohuimima{　　font-size:14　　padding-left:50　　}



我们在css中设置了背景图片，然后又设置了文字的padding-left属性，这样，图片和文字就在同一行显示了，运行结果就不切图了，你可以自己试一下。
3、把文字和图片分别放入不同的div中
下面说下最后一种方法，分别把图片和文字放入不同的div中，然后用“margin”属性进行定位，就可以使他们显示在同一行了。
html代码如下：

&div id="denglu"&　　&div id="zhuce"& &img src="reg.gif"/&　　&div id="zhaohuimima"&&a rel="nofollow" href="#"&找回密码&/a&&/div&　　&/div&



css代码如下：

#zhaohuimima{　　font-size:14　　margin-top:-16　　padding-left:50　　}



在浏览器中运行以后，你会发现，这个方法也可以让图片和文字在同一行显示，但是看起来好像麻烦了一点，所以个人还是比较推荐第一种方法的。
 
转自：/css/1149.html
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动

我要回帖

更多关于 css li文字在图片下方 的文章

 

随机推荐