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种方法的更多相关文章

  1. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  2. css控制图片与文字对齐

    文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明:baseline-将 ...

  3. CSS控制文本的长度，超过一行显示省略号

    代码如下: <div style="width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overfl ...

  4. 用CSS控制图片大小显示的方法

    图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 可以通过按比例缩小或者放大到某尺寸(自己指定), ...

  5. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  6. 利用来JS控制页面控件显示和隐藏有两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一:  1 2 document.getEle ...

  7. DIV+CSS如何让图片和文字在同一行！

    在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...

  8. CSS 之 控制图片与文字对齐

    文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明: baseline- ...

  9. CSS控制图片显示区域

    优化页面响应速度,减少页面向服务端请求图片次数,有时候可能会将多个小图合并到一张图中,用的时候通过css控制显示的区域,比如:上传一张人物图片到服务器检测人脸,最后在页面上列出所有识别出来的人脸,实现 ...

随机推荐

  1. sql中全文检索CHARINDEX 和PATINDEX 区别

    最近经常使用字符串查找功能. 包括 1.全匹配查找字符串 2.模糊查找字符串 CHARINDEX 和 PATINDEX 函数都返回指定模式的开始位置.PATINDEX 可使用通配符,而 CHARIND ...

  2. 【转】Stack Overflow研发副总裁：.NET技术并不差，合适自己就好

    摘要:在QCon纽约大会上, Stack Exchange的工程部副总裁David Fullerton深入解析了如何使用C#.MS SQL等技术支撑Stack Overflow网站的单块应用架构,这个 ...

  3. jQuery 效果 - 停止动画

    jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. jQuery stop() 方法 jQuery stop() 方法用于停止动画或效果,在它们完成之前. ...

  4. WinForm通过操作注册表实现限制软件使用次数的方法

    1.创建注册表文件: 打开记事本,输入一些内容: ? 1 2 3 REGEDIT4 [HKEY_CURRENT_USER/Software/MyRegDataApp] "UseTime&qu ...

  5. [Linux] Linux系统（文件操作）

    linux有三种文件类型,普通文件,目录,设备文件 查看文件 使用命令ls获取ll,查看文件列表,参数:-l(列表形式),-a(展示隐藏文件) 使用元字符* ? ,查看匹配的文件列表,例如:ll a* ...

  6. angular自定义指令 repeat 循环结束事件；limitTo限制循环长度、限定开始位置

    1.获取repeat循环结束: 自定义指令: .directive('repeatFinish', function () { return { link: function (scope, elem ...

  7. 菜鸟的HTML学习之路

    开发网站流程 确定风格.功能(论坛.留言板.支付.用户登录等). 美工制作网页效果图(首页.列表页.内容页). 制作人员切图排版,排成网页形式. 后台程序开始写程序. 前台与后台结合. HTML注释 ...

  8. 前端AMD、CMD和commonJs-前端知识

    前端AMD和CMD是在模块化的基础上产生并且得到大幅度的引用的. AMD 即Asynchronous Module Definition(点击链接可以查看AMD面试题),中文名是异步模块定义的意思.它 ...

  9. CSS选择器之伪类选择器（交互）

    :link 选取未访问链接 :active 选取活动链接(单击某链接,未松开鼠标时). :visited 选取已被访问的链接. :target 链接指定的目标 :hover 当鼠标浮在元素上方时. : ...

  10. oracle 实现主键自增

    -- 创建表 drop table test; create table test(id number(10), name varchar2(10)); -- 创建对列 drop sequence s ...