有些朋友会发现，如果一行内容中有图片有文字的话，文字往往会自动的底部对齐，影响美观，那如何让它们相对于垂直居中呢，很简单，就是在图片和文字所在的行中添加CSS属性：vertical-align:middle;这样，它们在同一行就会垂直居中对齐了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>让同一行内的图片和文字垂直居中对齐</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body{
font-size:9pt;
}
#buttons *{
vertical-align:middle;
}
/*如果上边的不兼容火狐等，可以把下面这句也加上！
#buttons *{
vertical-align:middle;
}
*/
</style>
</head>
<body>
<div id="buttons">
<img src="/jscss/demoimg/200902/reg.gif">
<img src="/jscss/demoimg/200902/login.gif">
<a href="#">找回密码</a>
</div><br>
上边的图片、文字是不是都垂直对齐了呢？
</body>
</html>
分享到：
相关推荐
本文实例讲述了CSS实现同一行的图片和文字垂直居中对齐的方法。分享给大家供大家参考。具体分析如下： 有些朋友会发现，如果一行内容中有图片有文字的话，文字往往会自动的底部对齐，影响美观，那如何让它们相对于...
在实际网页中，如何实现如何实现父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐呢？ 实现的关键是把文字当图片处理。 用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性...
今天特意在网上找到了一款插件--jquery.valign，可控制图片、文字在div容器内垂直上对齐、居中、底部对齐三种效果，使用方法： 1、调用jquery库以及本插件 2、jquery方法调用，如本案例第22、23行 使用说明： 外侧...
一、大小不固定，多行文字的垂直居中 ① 单行文字 可能很多人都知道如何让单行文字垂直... 这里的文字用来做多行文字垂直居中对齐的测试。这是第二行文字，您还可以再添加一行文字做测试！这是隐藏的第三行文字，注意
单行文本居中比较简单，就是将line-height设置成和height一样就可以了，但是对于多行文本，这种方式就行不通了，除了第一行，下面的就都看不到了。 多行文本垂直居中的CSS需要这么设置： 复制代码代码如下: /*多行...
大家都知道有时候一个文本输入框和一段文字在同一行上显示，然而它们总不是垂直居中，看上去不美观，这段CSS代码就是解决这一问题的，上边一行是没有定义，下边一行是定义过的，可以看出有明显的差别。 复制代码代码...
我们在编辑一个版面，通常都会用到水平居中和垂直居中来设计，而水平居中很好处理，不外乎就是设定margin:0 auto；或是text-align:center；，就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题，都是“垂直...
一、flex-direction: （元素排列方向） ...二、flex-wrap: （内容一行容不下的时候才有效） ※flex-wrap:nowrap （超出不换行，很奇怪里面的宽度会变成100%） ※ flex-wrap:wrap （超出按父级的高度平分） ※flex-
3.4.2 段落的垂直对齐方式 3.4.3 行间距和字间距 3.4.4 首字放大 3.5 段落实例：百度搜索 第4章 用CSS设置图片效果 4.1 图片样式 4.1.1 图片边框 4.1.2 图片缩放 4.2 图片的对齐 4.2.1 ...
文字的行高line-height=盒子高度 仅限于单行文字垂直居中 3.css的背景属性 （1）背景颜色 选择器{ background-color： transparent透明（透明）/color； } （2）背景图片（便于控制位置） 常用于logo 装饰性...
示例描述：本章演示移动字体和图片用法。 移动的基本语法.html 移动的基本语法。 文字的移动方向.html 设置文字的移动方向。 图片的移动.html 设置图片的移动。 设置移动对象.html 设置设置...
o align -- 代表行的水平对齐方式(left(左对齐) | center(居中对齐) |right(右对齐) | justify)(此属性应该使用CSS实现) o valign -- 代表行的垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) |...
1.color 文本颜色（预定义颜色值 十六进制 RGB代码） 2.text-align:center/right/left 让盒子内的文本水平对齐 ... 行高=上间距+文字大小+下间距 上间距=下间距 文字垂直居中 文本属性也就是外观属性
1.css的概述 1.问题 HTML属性修饰有一定局限，是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点：将css样式定义在HTML标记中 语法： 样式声明：用样式属性和值组成（属性:值;） ...
网格行和列不起作用列全宽（xs不起作用）列垂直堆叠而不是横向堆叠Navbar不起作用（或不显示）Navbar不切换Navbar始终为垂直垂直对齐或居中不起作用向右浮动（向右拉）不起作用 学习与辅导 工具 资源 Bootstrap文档...
作用：设置同一行文字内的不同样式 9、行内元素 与 块级元素 按照元素们的表现形式来分类，分为 行内元素 和 块级元素1、行内元素 在一行内允许显示多个元素的，称为 "行内元素" span,i,b,s,u,sup,sub 作用：...
3、 修改皮肤aero和chrome的图标布局，让回行消息文本留出图标的宽度 v2.0.4 1、 修改一小处兼容框架样式，防止调用页面body设置了文本对齐导致对话框标题文 本也居中 v2.0.3 1、 增加id参数，可以方便外部...
这三个属性是相互依赖的关系，改变行间距离、设置垂直对齐等都需要它们的通力合作。在CSS字体里面已经详细介绍了font-size的相关内容，本文将主要介绍line-height与vertical-align。 line-height 定义 line-...