CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法
在 HTML 代码中，有时会需要在文字旁边加上一个图标。
默认情况，是图片置顶对齐，文字置底对齐，所以通常图片高，文字低，不能水平居中对齐。
常见方法有3种：1、通过添加css的“vertical-align:middle;”；2、如果图片是背景图片，可以在css中设置背景图片；3、把文字和图片分别放入不同的div中。上面三种方法都可以让图片和文字在同一行显示，下面我们用实例来应用一下。
1、添加上“vertical-align:middle”属性
我们用“登陆”这个在实际情况做实例，把“登陆”做成图片，“找回密码”设置成文字其html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div >
<img src="logo.jpg" alt="" style="vertical-align:middle"><a href="">找回密码</a>
</div>
</body>
</html>
显示如下：
2、把图片设置为背景图片
如果我们的图片本身是一个背景图片的话，可以在css中使用“background”来设置该图片，html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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>
</head>
<body>
<div class="haokan">
<a href="">找回密码</a>
</div>
</body>
</html>
同样显示如下：
3、分别把图片和文字放入不同的div中，html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.divs .imgs{
display: inline-block;
vertical-align: middle;
}
.divs .infos{
display: inline-block;
}
</style>
</head>
<body>
<div class="divs">
<div class="imgs"><img src="logo.jpg" alt=""></div>
<div class="infos"><a href="">找回密码</a></div>
</div>
</body>
</html>
显示如下：
-------------------------------------------------------------------------------------------------------------------------------------
建议使用第一种方法。
完
转载需注明转载字样，标注原作者和原博文地址。
CSS控制图片和文字在同一行显示且对齐的3种方法的更多相关文章
- 如何利用CSS代码使图片和文字在同一行显示且对齐
对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...
- css控制图片与文字对齐
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明:baseline-将 ...
- CSS控制文本的长度，超过一行显示省略号
代码如下: <div style="width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overfl ...
- 用CSS控制图片大小显示的方法
图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 可以通过按比例缩小或者放大到某尺寸(自己指定), ...
- css背景图片拉伸 以及100% 满屏显示
如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...
- 利用来JS控制页面控件显示和隐藏有两种方法
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 document.getEle ...
- DIV+CSS如何让图片和文字在同一行！
在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...
- CSS 之 控制图片与文字对齐
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明: baseline- ...
- CSS控制图片显示区域
优化页面响应速度,减少页面向服务端请求图片次数,有时候可能会将多个小图合并到一张图中,用的时候通过css控制显示的区域,比如:上传一张人物图片到服务器检测人脸,最后在页面上列出所有识别出来的人脸,实现 ...
随机推荐
- win10 uwp 让焦点在点击在页面空白处时回到textbox中
在网上 有一个大神问我这样的问题:在做UWP的项目,怎么能让焦点在点击在页面空白处时回到textbox中? 虽然我的小伙伴认为他这是一个 xy 问题,但是我还是回答他这个问题. 首先需要知道什么是空白 ...
- XP系统运行wpf程序出现透明现象的解决
xp 虚拟机运行WPF程序的时候,有部分控件透明,在这儿有一个可能的解决方案: 关闭系统的硬件加速: 1. 按“WIN” + R 键,在“运行”输入框中输入“dxdiag”: 2. 在“DirectX ...
- 谷歌旗下专业图片编辑Snapseed获重大更新
谷歌旗下的图片编辑应用Snapseed今天获得重大更新,承诺为用户的手机或者平板带来“精确和卓越控制的专业图片编辑软件”.Android和iOS版本同时获得更新,新增包括镜头模糊.色条对比.更加灵活的 ...
- vps服务器搭建——Linode VPS 20美元优惠获取教程
转载:http://www.cuishifeng.cn/linode/index.html?v=2 声明:本文旨在教大家怎么获得linode 20美元优惠,并免费使用4个月vps,请低调薅羊毛!(多张 ...
- iOS 交互h5 - WKWebView
众所周知,UIWebView存在内存问题,也就是当加载一个UIWebView时,内存会一直上升趋势无法得到释放.这样在使用UIWebView进行h5交互开发时会有很大的问题. 因而苹果增加了一个新的类 ...
- nginx 错误日志分析
502 1.查看nginx错误日志 tailf /data/log/nginx/error.log // :: [error] #: * recv() failed (: Connection res ...
- knockout事件绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- CentOS 7 隐藏任务栏和顶栏
我使用的是Gnome,对于使用惯了windows的我来说,这个界面确实有点丑,但是,也将就着用了,最近发现有一款软件(Cairo-Dock)可以美化桌面,于是就安装了,但是安装之后发现了一个问题:原来 ...
- QT5.4.2静态编译(包含QtWebKit)，在VS2013上创建项目，并成功运行
Qt项目发布的exe程序,默认是以动态链接形式的,这样发布后的程序会附带好多Qt自己的dll库,这样文件数量不仅多,而且移植到其他电脑上的时候,还可能会遇到,提示缺其他库等各种运行不起 ...
- Linux 调试: systemtap
安装与配置 在ubuntu下直接用apt-get install之后不能正常使用,提示缺少调试信息或者编译探测代码时有问题. 1. 采用官网上的解决方法 2. 可以自己重新编译一次内核,然后再手工编译 ...