图片和文字对齐
类别:Web前端 浏览量:1367
时间:2015-6-30 图片和文字对齐
图片和文字对齐方式一、添加“vertical-align:middle”属性
<li >
<img src="logo.jpg" alt="" style="vertical-align:middle"><a href="">找回密码</a>
</li>
方式二、把图片设置为背景图片
<style>
.haokan{
width: 300px;
height: 50px;
line-height: 50px;
background-color: red;
background: url(logo.jpg) no-repeat left center;
}
.haokan a{
display: block;
margin-left: 116px;
}
</style>
<li class="haokan">
<a href="">找回密码</a>
</li>
方式三、分别把图片和文字放入不同的li中
<style>
.lis .imgs{
display: inline-block;
vertical-align: middle;
}
.lis .infos{
display: inline-block;
}
</style>
<li class="lis">
<li class="imgs"><img src="logo.jpg" alt=""></li>
<li class="infos"><a href="">找回密码</a></li>
</li>
标签:图片居中
热门推荐
- 织梦dedecms优化安全设置指南(DeDecms SEO优化经验谈适用于任何网站)
- 磐石云香港VPS服务器怎么样?磐石云香港VPS CN2线路测评(磐石云香港VPS服务器怎么样?磐石云香港VPS CN2线路测评)
- 小程序实现左右滑动窗口(小程序实现分页效果)
- 常用SQL查询语句
- 云主机的作用和功能(云主机具备的特性有哪些?)
- 宝塔面板导入数据库(宝塔面板迁移系统盘/www到数据盘/data)
- css3字体怎么写(css3个性化字体_动力节点Java学院整理)
- python ssh 连接(python pexpect ssh 远程登录服务器的方法)
- php开发的主要技术(详解PHP神奇又有用的Trait)
- laravel命令行与可选项(Laravel6.0.4中将添加计划任务事件的方法步骤)