经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › 关于单行img+文字和input+文字垂直居中。

查看: 2011|回复: 9

[讨论] 关于单行img+文字和input+文字垂直居中。 [复制链接]

fvbfvb　楼主

新手上路 

帖子: 5
体力: 28
威望: 0
居住地: 浙江省杭州市

发表于 2010-5-25 13:23:40 |显示全部楼层

要单行img+文字和input+文字垂直居中，要做这种最好是怎么写呢，弄在同一层，还是分两个层，大家一般都是怎么做的？

西部数码云主机4G内存500G仅需423元

使用道具举报

birdstudio　

CSS魔术师

荣誉管理 

帖子: 2452
体力: 5010
威望: 4

发表于 2010-5-25 16:13:44 |显示全部楼层

需要混合在文本行中的图片，我建议使用 span 的背景来实现。

表单控件与文本混合时，建议将文本放在 label 或 span 标签内。让表单控件与 label/span 均浮动，这样在垂直方向上比较容易控制。

总之，尽量避免行内块与行内元素（或文本）混排。

■ 提问请贴图贴代码。　　● 我的微博　　● 我的博客 (已恢复)

租服务器，上51IDC

使用道具举报

14px　

秋末

荣誉管理

帖子: 1616
体力: 4220
威望: 52
居住地: 湖南省长沙市

发表于 2010-5-25 20:57:00 |显示全部楼层

img,input { vertical-align:middle;}

感觉蛮好使的啊。

我的博客（14px.com）我的微博（t.qq.com/qweibo）

使用道具举报

lesliezmz　

周大智

高级会员 

帖子: 296
体力: 700
威望: 5
居住地: 广东省珠海市

发表于 2010-5-25 21:30:49 |显示全部楼层

原帖由 14px 于 2010-5-25 20:57 发表
img,input { vertical-align:middle;}
感觉蛮好使的啊。

求指点……

失业青年，求北京、珠海地区收留。

使用道具举报

yoom　

木匠的背篓

版主 

帖子: 4978
体力: 14748
威望: 18
居住地: 浙江省杭州市

发表于 2010-5-25 22:11:52 |显示全部楼层

都是12px惹的祸，14px的环境下很好局中的。

集艺术之精湛于邮票。

使用道具举报

fvbfvb　楼主

新手上路 

帖子: 5
体力: 28
威望: 0
居住地: 浙江省杭州市

发表于 2010-5-26 16:04:07 |显示全部楼层

回复 3# 14px 的帖子

我也觉得这个不怎么好用，因为我是放在同一层的，它对img和input有效，对文字没效，如果把img、input和图片分成两个层各自用不同的方式垂直居中，我想应该好用。
呵呵，我是新手没讲对的地方，大家多指点。

[ 本帖最后由 fvbfvb 于 2010-5-26 16:13 编辑 ]

使用道具举报

zhangsuoyong　

新手上路 

帖子: 1
体力: 39
威望: 0

发表于 2010-5-27 14:20:54 |显示全部楼层

height = line-height
img设置align=middle或者vertical-align:middle;

使用道具举报

14px　

秋末

荣誉管理

帖子: 1616
体力: 4220
威望: 52
居住地: 湖南省长沙市

发表于 2010-5-27 15:52:21 |显示全部楼层

不需要line-height。
line-height是使文字在父体中垂直居中使用的。
vertical-align:middle很好用的：

提示：您可以先修改部分代码再运行

如果文字有好几组要区分（或者颜色大小不一样，或者有的是链接什么的），就需要利用到inline-block了：

提示：您可以先修改部分代码再运行

我的博客（14px.com）我的微博（t.qq.com/qweibo）

使用道具举报

notgo　

初级会员 

帖子: 39
体力: 150
威望: 0

发表于 2010-5-27 23:27:03 |显示全部楼层

楼上说的vligh:middle 好像在IE6不兼容吧,,,

文字和按扭的居中,我看腾讯好像用的是absmiddle........

使用道具举报

14px　

秋末

荣誉管理

帖子: 1616
体力: 4220
威望: 52
居住地: 湖南省长沙市

发表于 2010-5-28 00:00:38 |显示全部楼层

- -! 别“好像”啊，让ie6自己说话。

我的博客（14px.com）我的微博（t.qq.com/qweibo）

使用道具举报

返回列表

Archiver|手机版|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-5-1 21:33 , Processed in 0.178221 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X2

		自动登录	找回密码
密码			注册

[讨论] 关于单行img+文字和input+文字垂直居中。 [复制链接]

回复 3# 14px 的帖子

浏览过的帖子

浏览过的版块

维基贡献