同一行的图片和文字对齐的几种方法

当图片和文字出现在同一行或一个div里时，浏览器显示出来的图片和文字会出现对不齐，一个在上一个在下，遇到这样的问题，一般有以下几种解决方法

1、把图片和包裹文字的span、a等标签都加上vertical-align:middle的样式（vertical-align的具体介绍）

2、把图片设置为背景图片，文字用padding或text-indent属性设置进行偏移

3、把图片和文字放入不同的div中，然后用margin-left、margin-top属性进行定位，就可以使他们对齐了

时间： 2024-10-10 14:10:52

同一行的图片和文字对齐的几种方法的相关文章

css:图标与文字对齐的两种方法

(好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src="" class="heart"> <span>1169</span> <img src="" class="comment"

CSS控制图片和文字在同一行显示且对齐的3种方法

CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法有3种:1.通过添加css的“vertical-align:middle;”:2.如果图片是背景图片,可以在css中设置背景图片:3.把文字和图片分别放入不同的div中.上面三种方法都可以让图片和文字在同一行显示,下面我们用实例来应用一下. 1.添加上“vertical-align:middle”属

css控制图片与文字对齐

文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明:baseline-将支持valign特性的对象的内容与基线对齐sub-垂直对齐文本的下标super-垂直对齐文本的上标top-将支持valign特性的对象的内容与对象顶端对齐text-top-将支持valign特性的对象的文本与对象顶端对齐middle-将支持valign特性的对象的内容与对象中部对齐bottom-将支

图片和文字对齐的方法

文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 方法一. 设置各对象的vertical-align属性,属性说明: baseline-将支持valign特性的对象的内容与基线对齐 sub-垂直对齐文本的下标 super-垂直对齐文本的上标 top-将支持valign特性的对象的内容与对象顶端对齐 text-top-将支持valign特性的对象的文本与对象顶端对齐 middle-将支持valign特性的对象的内容与对象中部

php如何防止图片盗用/盗链的两种方法(转)

图片防盗链有什么用? 防止其它网站盗用你的图片,浪费你宝贵的流量.本文章向大家介绍php防止图片盗用/盗链的两种方法 Apache图片重定向方法 设置images目录不充许http访问 Apache服务器下防止图片盗链的办法 如果你的网站以图片为主,哪天发现月底没到流量就快用光了,那就可以利用图片转向,在不修改网页的前提下,把图片下载请求转向到其它空间(比如试用主机),临时过渡. (详细请点击)http://www.cnblogs.com/myhomepages/p/6017867.html

php如何防止图片盗用/盗链的两种方法

如今的互联网,采集网站非常多,很多网站都喜欢盗链/盗用别人网站的图片,这样不仅侵犯网权,还导致被盗链的网站消耗大量的流量,给服务器造成比较大的压力,本文章向大家介绍php如何防止图片盗用/盗链的两种方法,需要的朋友可以参考一下. 图片防盗链有什么用? 防止其它网站盗用你的图片,浪费你宝贵的流量.本文章向大家介绍php防止图片盗用/盗链的两种方法 Apache图片重定向方法 设置images目录不充许http访问 Apache服务器下防止图片盗链的办法 如果你的网站以图片为主,哪天发现月底没到流量

[BS-19]更改UITextField的placeholder文字颜色的5种方法

更改UITextField的placeholder文字颜色的5种方法 想要达到的目标是:一个页面上有多个UITextField,当用户聚焦某textField时,该文本框的placeholder的文字会灰色变为白色,当文本框失去焦点时,placeholder颜色从白色再变回灰色. 1.放置UILabel 最简单最笨的方法是在每个textField里放一个UILabel来充当placeholder,当该textField聚焦时,让placeholder的文字会灰色变为白色,失焦后从白色再变回灰色.

css实现两端对齐的3种方法

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="author" content="monicaqin"> <meta name="format-detection" content="telephone=no" /> &

图片水平垂直居中对齐的四种做法

在前端开发中,图片垂直居中对奇是很常见的,有些是固定高度,有些没有固定高度,本文分享我用的四种方法,希望对你有所启发. 以下说的做法暂不考虑IE浏览器的兼容性,适用于移动端 以下的做法中假定外层的高度和宽度已经固定.通用HTML和CSS代码: <div class="img"> <img src="1.jpg"/> </div> .img { width:300px; height:300px; margin:20px auto;