css中使用input与img(图片)在同一行居中对齐

将input和img放同一行,img标签总是比input高出一个头,难看。后来在网站搜到最多的就是给img添加一个align="absmiddle"属性,这个方法似乎的确可行,但是不符合HTML标准。后来发现同时给input和img添加vertical-align:middle就行:

在写css时,使得input和img在同一行居中对齐的方法:

img{vertical-align:middle;}

input{width:宽度;height:高度;line-height:与高度一致;margin:0px;padding;0px;font-size:字体大小;border:边框;vertical-align:center;}

或直接这样写

input,img{vertical-align:middle;}

时间: 2024-09-22 11:28:52

css中使用input与img(图片)在同一行居中对齐的相关文章

css中使input输入框与img(图片)在同一行居中对齐

如何让input输入框与img在同一行居中对齐,由于经常会使用到,默认情况下将input和img放同一行,img标签总是比input高出一个头,很难看,大家可以参考下本文或许有所帮助   将input和img放同一行,img标签总是比input高出一个头,难看.后来在网站搜到最多的就是给img添加一个 align="absmiddle"属性,这个方法似乎的确可行,但是不符合HTML标准.后来发现同时给input和img添加vertical- align:middle就行: 在写css时

css中解决ie6下背景图片底部不对齐错位办法

先来两段代码,一段是HTML代码,一段是CSS代码,下面的分析都是在这两段代码的基础上进行. HTML代码:  代码如下 复制代码 <!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/1

css中固定高度容器内的图片垂直水平居中的实例

在某一个网站(freeappstools)上看到的这个"新奇"解法,说新奇,主要是国内各种总结的方法都没提到过,打引号,只是因为其中的原理很多人都知道:即依靠行高(line-height)的方法.  line-height对于img元素并不起作用:  代码如下 复制代码 <div style="height:250px;background:#ccc;line-height:250px;width:400px;text-align:center;">  

CSS中背景图片的定位

1. 关键字, 例如: background-position: top right; 优点: 直观, 可用性高, 各浏览器中表现一致. 缺点: 缺少间隔尺寸. 三个垂直的 (top, center, bottom) 和三个水平的 (left, center, right) 只能为你组合出最多 9 个位置. 不存在其他混式的组合. 并且很难像其他两种数值定位方法一样使用算数进行控制. 2. 像素, 例如: background-position: 0px 0px; 优点: 概念容易被理解, 只要

CSS中以图片替换文字的表现方法

css 今天有个朋友做网页的时候遇到个问题:想保留链接的背景,但又要链接里的文字消失!可是弄了半天一直没办法把这个文字去掉.我想很多学标准的朋友都遇到过这个问题,这里我把常用的几个方法写出来,把思路也讲一下,希望能帮助刚开始学习的朋友. "以图换字"就是用图片替换文字表现.我们都知道,文字在浏览器里的表现形式是很差的,会有锯齿,没办法圆润还有没办法做很多效果.一般情况下网页的内容部分是不需要做效果的,但是在WEB标准中对于LOGO.标题,常常需要用到这些.用表格来做的话我们只是在某个地

CSS中背景图片定位方法

CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同. 前两种定位,都是将背景图片左上角的原点,放置在规定的位置.请看下面这张图

PHP file_put_contents()实现批量下载图片文件和css中图片代码

 代码如下 复制代码 set_time_limit(0);//设置PHP超时时间 $imagesURLArray = array_unique($imagesURLArray );   foreach($imagesURLArray as $imagesURL) {     echo $imagesURL;     echo "<br/>";     file_put_contents(basename($imagesURL), file_get_contents($ima

PHP批量下载html与css中图片文件实例

最近一直很忙,遇到一个手工活,需要下载一些远程的图片,一共一百多张,如果通过手工一张一张的保存,也太耗费时间了,于是上网google了一把,找到PHP批量下载图片文件的方法,原文是出自平凡世界博客的一片关于如何使用PHP批量下载CSS文件中的图片的文章.经过研究改写了一下就可以使用了,方便快捷多了. PHP批量下载图片文件代码:  代码如下 复制代码 set_time_limit(0);//设置PHP超时时间 $imagesURLArray = array_unique($imagesURLAr

css中文字图片背景图居中的方法汇总

一.让网页所有DIV标签内文字居中   -   实现所有DIV内字体居中实例完整网页源代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>div字体居中实例</title> <style> div{text-align:center