文字和图片，图片和图片底部对齐

1.文字和图片，图片和图片底部对齐

类似结构

Html代码

<div><img src="" />text</div>或者<div><img src="" /><img src="" /></div>

原本如果不对image定义其它样式，用img的初始样式就能达到这个效果.

而我开发的页面中文字和图片，图片和图片都是顶部对齐。

当项目开发到一定的阶段，页面比较多，样式也比较多，要修正这个问题还有点问难。

于是我一一排除问题，最后发现原来是我定义的全局样式

Html代码

img{vertical-align:top;}

img{vertical-align:top;}

引起的。要解决这个问题只需在要对齐的地方对img重新定义

Html代码

img{vertical-align:bottom;}或者img{vertical-align:baseline;}(初始值)

img{vertical-align:bottom;}或者img{vertical-align:baseline;}(初始值)

采用img{display:block;}来解决“img标签下多余空白bug”，可是很多类似<div><img src="" />text</div>的结构就要花更多的样式去对齐了.

2.父容器定义行高后图片和文字的对齐方式

类似结构

Html代码

<div><img src="" />text</div>

<div><img src="" />text</div>

三种情况

1，img{vertical-align:top;}

2，img{vertical-align:middle;}

3，img{vertical-align:bottom;}

FF：文字和图片在同一行时

1.文字行高的顶部和图片顶部对齐

2.文字行高的中部和图片中部对齐

3.文字行高的底部和图片底部对齐

IE6,IE7，IE8：

1,3两种情况显示效果一样.文字和图片在同一行时，这一行文字定义的行高没有起作用，并且文字相对图片都是顶部对齐的。

2.文字和图片在同一行时，这一行文字的行高等于图片的高度，文字相对图片垂直居中

最近工作中遇到些关于“图片和文字的对齐”的问题：

1.文字和图片，图片和图片底部对齐

类似结构

Html代码 <div><imgsrc=""/>text</div>或者<div><imgsrc=""/><imgsrc=""/></div>

原本如果不对image定义其它样式，用img的初始样式就能达到这个效果.

而我开发的页面中文字和图片，图片和图片都是顶部对齐。

当项目开发到一定的阶段，页面比较多，样式也比较多，要修正这个问题还有点问难。

于是我一一排除问题，最后发现原来是我定义的全局样式

Html代码 img{vertical-align:top;}

img{vertical-align:top;}

引起的。要解决这个问题只需在要对齐的地方对img重新定义

Html代码 img{vertical-align:bottom;}或者img{vertical-align:baseline;}(初始值)

img{vertical-align:bottom;}或者img{vertical-align:baseline;}(初始值)

至于我为什么用全局样式“img{vertical-align:top;}”请参考img标签下多余空白bug解决方法。当然我也考虑过采用img{display:block;}来解决“img标签下多余空白bug”，可是很多类似<div><img src="" />text</div>的结构就要花更多的样式去对齐了.

2.父容器定义行高后图片和文字的对齐方式

类似结构

Html代码 <div><imgsrc=""/>text</div>

三种情况

1，img{vertical-align:top;}

2，img{vertical-align:middle;}

3，img{vertical-align:bottom;}

FF：文字和图片在同一行时

1.文字行高的顶部和图片顶部对齐

2.文字行高的中部和图片中部对齐

3.文字行高的底部和图片底部对齐

IE6,IE7，IE8：

1,3两种情况显示效果一样.文字和图片在同一行时，这一行文字定义的行高没有起作用，并且文字相对图片都是顶部对齐的。

2.文字和图片在同一行时，这一行文字的行高等于图片的高度，文字相对图片垂直居中

3.文字和图片同时加链接

类似结构

Html代码 <ahref="http://ice-cream.javaeye.com"/><imgsrc=""/>text</a>

一般链接都会hover时加下划线以示区分，但是我们希望给文字下划线，而不给图片下划线。

通常a:hover{text-decoration:underline;}在img的缺省样式下,文字和图片都会显示下划线。

如果要把图片的下划线去掉，只需这样定义：

当图片和文字之间换行时（文字描述图片）：

Html代码 img{display:block;}

img{display:block;}

当图片和文字同行时（图片表示分类，文字表示内容）：

这时图片一般是icon，尺寸较小，建议把icon放入背景图里，页面加载时可以减少http请求，同时也不用对img定义特殊的样式就能达到效果。

如果图片较大，可以定义

Html代码 img{display:block;float:left;}

img{display:block;float:left;}

同时给文字也浮动。

文字和图片，图片和图片底部对齐相关推荐

Android一串数字分两段，底部对齐字号不同
一串数字/文字分两段,字号不同没什么技术含量,分享下. 效果图 package xxx;import android.content.Context; import android.graphics ...
html图片后边自动底部对齐,css实现图片与文字底边对齐
css实现图片与文字底边对齐通常图片与文字放在一起的时候图片往往会偏上,通过设置margin-bottom可以达到文字图片底边对齐的目的我们在做网页的时候, 会遇到一个图片和文字位置对不齐的问题. ...
android文字与图片底部对齐,ImageView 图片和 TextView 文字的底部对齐
有时我们需要做到大文字小图片在一行显示,并且图片跟文字的底部对齐,如图: 以 RelativeLayout 为例: 1. 当 ImageView 设置了 alignBottom 属性,对齐的方式是这样 ...
【CSS】图片底部空白缝隙处理 ( 使用居中对齐 / 顶部对齐 / 底部对齐 | 将行内元素 / 行内块元素转为块级元素 )
文章目录一.图片底部空白缝隙问题二.图片底部空白缝隙问题解决方案一 ( 使用居中对齐 / 顶部对齐 / 底部对齐 ) 三.图片底部空白缝隙问题解决方案二 ( 将行内元素 / 行内块元素转为块级元素 ...
Android图片底部对齐（scaleType底部对齐）
背景今天在讨论UI优化的时候,首页有个控件支持动态切换背景图,但是该控件的高度并不固定,如果直接使用图片背景的话会照成图片失真,如下图(子控件显示条数不固定) 这时候ui妹子突然说图片由下往上展示, ...
HTML在日期单元格添加小图片,如何给图片添加上文字、日期和自己名字的小水印呢？...
刚刚分享过一篇如何添加文字.日期和印章的文章,大家可以使用图曰(yue)app来完成,首先先看几张效果图,而且还可以添加上一些边框呢! 给图片添加上一些文字之后,图片的文艺气息更加的浓厚 2.尤其是风 ...
C#生成带背景和文字的二维码图片
/// <summary> /// 生成带背景和文字的二维码图片 /// </summary> /// <param na ...
PHP图片水印函数:图片和文字水印
2019独角兽企业重金招聘Python工程师标准>>> 支持以图片和文字两种方式给图片添加水印.图片支持GIF,PNG,JPG三种格式,水印图片支持PNG和GIF function ...
VUE+Canvas实现输入文字生成对应的字体图片小功能
你是不是经常浏览字体网站的时候,发现他们的"字体生成器"和预览功能很好奇,为什么输入框输入文字之后,点击预览,下面都会修改对应的字体内容,以便达到了没有安装字体也可以预览这个字体效 ...

文字和图片，图片和图片底部对齐

文字和图片，图片和图片底部对齐相关推荐

最新文章

热门文章