css 如何让文字和图片对齐
2016-07-12 18:25
267 查看
在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三:
处理前: 处理后:
1.添加CSS属性:vertical-align:middle;
代码:
<style>
a img{border:none}
.testdiv *{
vertical-align:middle;
}
</style>
<div class="testdiv">
<ahref="http://www.zc144.com/"><imgsrc="http://www.zc144.com/download/Template.jpg" alt="这里是图片"/></a>
<span>这里是文字,看看文字对齐了没</span>
</div>
[查看效果]
2.div嵌套:将图片和文字分别套上一个div,就可以利用 margin熟悉任意定位了
代码:
<style>
a img{border:none}
.testIMG{
float:left;
display:inline;
margin-top:0;
margin-left:5px;
}
.testTXT{
float:left;
display:inline;
margin-top:20;
margin-left:5px;
}
</style>
<div class="testdiv">
<divclass="testIMG"><ahref="http://www.zc144.com/"><imgsrc="http://www.zc144.com/download/Template.jpg" alt="这里是图片"/></a></div>
<divclass="testTXT"><span>这里是文字,看看文字对齐了没</span></div>
</div>
[查看效果]
3.把图片作为背景:如果你的图片只是用来作为小图标放在文字的左侧,那就推荐用这个方法,图片设置成文字的背景,不循环,定位在左侧上下居中,文字向左padding图片的宽度加几个像素。
代码:
<style>
a img{border:none}
.testTXT{
height:60px;
line-height:60px;
padding-left:65px;
background:url(http://www.zc144.com/download/Template.jpg)no-repeat left center
}
</style>
<div class="testdiv">
<divclass="testTXT"><span>这里是文字,看看文字对齐了没</span></div>
</div>
[查看效果]
PS. 彘丑先生原创文章,转载请注明出处并保留原文所有链接,谢谢!
处理前: 处理后:
1.添加CSS属性:vertical-align:middle;
代码:
<style>
a img{border:none}
.testdiv *{
vertical-align:middle;
}
</style>
<div class="testdiv">
<ahref="http://www.zc144.com/"><imgsrc="http://www.zc144.com/download/Template.jpg" alt="这里是图片"/></a>
<span>这里是文字,看看文字对齐了没</span>
</div>
[查看效果]
2.div嵌套:将图片和文字分别套上一个div,就可以利用 margin熟悉任意定位了
代码:
<style>
a img{border:none}
.testIMG{
float:left;
display:inline;
margin-top:0;
margin-left:5px;
}
.testTXT{
float:left;
display:inline;
margin-top:20;
margin-left:5px;
}
</style>
<div class="testdiv">
<divclass="testIMG"><ahref="http://www.zc144.com/"><imgsrc="http://www.zc144.com/download/Template.jpg" alt="这里是图片"/></a></div>
<divclass="testTXT"><span>这里是文字,看看文字对齐了没</span></div>
</div>
[查看效果]
3.把图片作为背景:如果你的图片只是用来作为小图标放在文字的左侧,那就推荐用这个方法,图片设置成文字的背景,不循环,定位在左侧上下居中,文字向左padding图片的宽度加几个像素。
代码:
<style>
a img{border:none}
.testTXT{
height:60px;
line-height:60px;
padding-left:65px;
background:url(http://www.zc144.com/download/Template.jpg)no-repeat left center
}
</style>
<div class="testdiv">
<divclass="testTXT"><span>这里是文字,看看文字对齐了没</span></div>
</div>
[查看效果]
PS. 彘丑先生原创文章,转载请注明出处并保留原文所有链接,谢谢!
相关文章推荐
- display和visibility的区别
- 表格行的css交替
- 单纯只是为了方便查看而已 --CSS篇
- 用 CSS 隐藏页面元素的 5 种方法
- css实现热点地图map,鼠标移到热点弹出层提示框
- css实现div背景透明,文字不透明
- 【POI xlsx】使用POI对xlsx的单元格样式进行设置 / 使用POI对xlsx的字体进行设置
- css实现鼠标移动图片上放大效果
- 在网上看到用CSS制作动态小黄人,我自己实践了下
- WPF窗体样式继承
- Atom Editor 插件 atom-less 的使用方法
- 如何让div自动适应内容宽度,并且居中
- CSS整体界面设计
- CSS tab选项卡(标签页)切换
- CSS list-style属性控制ul标签样式
- 使用CSS3 backface-visibility:hidden;属性制作翻转动画效果
- css-表格的美化总结
- [原创]CSS3打造动态3D气球
- CSS实现会发光的输入框input
- css的transition 属性