[加入收藏]
[
教程购买
]
[服务指南]
首页
|
办公自动化
|
网页制作
|
平面设计
|
动画制作
|
数据库开发
|
程序设计
|
全部视频教程
应用视频:
Windows
|
Word2007
|
Excel2007
|
PowerPoint2007
|
Dreamweaver 8
|
Fireworks 8
|
Flash 8
|
Photoshop cs
|
CorelDraw 12
编程视频:
C语言视频教程
|
HTML
|
Div+Css布局
|
Javascript
|
Access数据库
|
Asp
|
Sql Server数据库
|
Asp.net
|
Flash AS
编程视频:
C语言视频教程
|
HTML
|
Div+Css布局
|
Javascript
|
Access数据库
|
Asp
|
Sql Server数据库
|
Asp.net2.0
|
Flash AS
应用视频:
Windows
|
Word2007
|
Excel2007
|
PowerPoint2007
|
Dreamweaver 8
|
Fireworks 8
|
Flash 8
|
Photoshop cs
|
CorelDraw 12
文字教程:
Windows教程
|
Word教程
|
Excel教程
|
PowerPoint教程
视频教程
:
Windows视频教程
|
Word2007视频教程
|
Excel2007视频教程
|
PPT2007视频教程
文字教程:
Dreamweaver教程
|
Fireworks教程
|
Flash教程
|
PhotoShop教程
|
HTML教程
|
Div+Css布局教程
视频教程:
Dreamweaver视频教程
|
Fireworks视频教程
|
Flash视频教程
|
PhotoShop视频教程
|
HTML视频教程
|
DIV+CSS视频教程
文字教程:
Fireworks教程
|
PhotoShop教程
|
CorelDraw教程
视频教程:
Fireworks 8视频教程
|
PhotoShop CS视频教程
|
CorelDraw12视频教程
文字教程:
Flash教程
|
Flash AS脚本教程
视频教程:
Flash 8视频教程
|
Flash AS视频教程
文字教程:
Access教程
|
sql server教程
视频教程:
Access数据库视频教程
|
Sql Server2005数据库视频教程
文字教程:
C语言教程
|
Javascript教程
|
Asp教程
|
Asp.Net网站开发教程
视频教程:
C语言视频教程
|
JavaScript视频教程
|
ASP视频教程
|
ASP.NET视频教程
|
网站制作视频教程
|
ASP动态网站制作视频教程
当前位置 >
文字教程
>
div+css布局教程
Tag:
css
,
入门
,
技巧
,
div
,
实例
,
示例
,
菜单
,
布局
,
web2.0
,
ul
,
li
,
经验
,
列表
,
web标准，xhtml
,
web标准
,
浏览器
,
兼容
,
css hack
,
表格
,
视频教程
文本输入框与文本不对齐(input对齐同一行的文字)怎么办？
文章类别：
div+css布局
| 发表日期:2008-9-26 11:13:01
在进行div css网页布局的时候，不可避免的需要插入一定的表单元素，input是其中最常见的一种。我们在布局中，常会碰到文本输入框与同处一行的文本不对齐的问题。这个问题设置input的vertical-align:middle属性来解决。
我们来看下面的例子，如何解决文本输入框与文本对齐的问题！
Source Code to Run
[www.21shipin.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>21shipin.com</title> <style type="text/css"> #a { height:30px; border:1px solid #ccc; } #b { margin-top:20px; height:30px; border:1px solid #ccc; } #a input { width:200px; height:30px; border:1px solid red; } #b input { width:200px; height:30px; border:1px solid red; vertical-align:middle; } </style> </head> <body> <div id="a"><input type="text" />21shipin.com - Div CSS布局 常见问题</div> <div id="b"><input type="text" />21shipin.com - Div CSS布局 常见问题</div> </body> </html>
[ 可先修改部分代码 再运行查看效果 ]
在a中是未设置的样子。文本与文本框不能垂直对齐，很不美观。
在b中，设置了vertical-align:middle;解决了这一问题。文本与文本框垂直居中对齐。
上一篇：
{教程}容器高度1px在IE中达不到效果如何设置最小高度？
人气:4560
下一篇：
{教程}web标准中滚动条颜色设置失效怎么办？
人气:3630
div+css布局视频教程
Windows操作
[文]
Word教程
[文]
Excel教程
[文]
PowerPoint
[文]
Dreamweaver
[文]
Fireworks
[文]
Flash教程
[文]
PhotoShop
[文]
CorelDraw
[文]
C语言教程
[文]
Html教程
[文]
Div+Css布局
[文]
Javascript
[文]
ACCESS数据库
[文]
ASP教程
[文]
SQLServer
[文]
ASP.NET教程
[文]
FlashAS
[文]
视频教程列表
计算机基础入门及办公自动化:
Windows视频教程
Word视频教程
Excel视频教程
PPT视频教程
网页制作开发视频教程:
Dreamweaver视频教程
Fireworks视频教程
Flash视频教程
Photoshop视频教程
HTML视频教程
Div+Css布局视频教程
静态网站项目实例视频教程
平面广告设计视频教程
Fireworks视频教程
Photoshop视频教程
CorelDraw视频教程
初级程序设计及ASP动态网站开发
C语言视频教程
Javascript视频教程
Access数据库视频教程
Asp网站开发视频教程
Asp项目实例开发视频教程
Asp.net动态网站开发视频教程
Sql Server数据库视频教程
Asp.net视频教程
Flash 动画角本编程视频教程
Flash视频教程
Falsh MTV视频教程
文章教程搜索
输入您的搜索字词
google
本站
提交搜索表单
div+css推荐教程
.div+css布局视频教程(21视频教程
.DIVCSS布局实例：DIV CSS新闻列表
.{WEB标准}用Css来制作一个更漂亮
.{WEB标准}推荐： CSS样式表设计经
.{WEB标准}CSS实现当前页的滑动门
.{WEB标准}alt属性和title属性
.{WEB标准}w3c技术架构介绍
.{WEB标准}web标准概念入门
.{XHTML}HTML表格标记教程(38):表
.{XHTML}HTML表格标记教程(37):表
.{CSS}学习CSS制作网页总结的一些
.{CSS}写给刚刚接触web标准的新人
.{CSS}display:inline及与float:
.{CSS}CSS代码结构初探：根基的建
.{CSS}CSS提高网页的维护更新效率
.DOV CSS表单：超炫的单选框与复选
.用背景图片实现CSS柱状图表一例
.XHTMLCSS网页布局中ID与class的
.DIVCSS教程：判定用户浏览器及分
.如何制作可控制显示或隐藏的伸缩
.用CSS控制输入框input样式，悬停
.如何实现多风格选择样式实时切换
.段落前面空两个字，不使用空格。怎
.border与list缩写的时候应该注重
.CSS对文字溢出时的自动隐藏处理
.Div CSS三列布局最先显示中列的
.DIV CSS布局概述及初步入门
.在WEB标准中嵌入Flash的最佳方法
.Div CSS布局网站设计的优点！
div+css热门教程
.CSS教程:链接外虚线框的设定hid
.2012年做的不错的CSS网站分享(5
.2012年做的不错的CSS网站分享(4
.2012年做的不错的CSS网站分享(3
.2012年做的不错的CSS网站分享(2
.2012年做的不错的CSS网站分享(1
.CSS教程：CSS3 Transform的persp
.CSS教程：CSS3 Transform的persp
.CSS教程:CSS变换(transition)
.CSS教程：初学者使用div和css误区
.Div+Css教程：CSS开发工具介绍（3
.Div+Css教程：CSS开发工具介绍（2
.Div+Css教程：CSS开发工具介绍（1
.Div+Css教程：display:none与vis
.CSS教程：背景图像属性backgroun
.CSS教程：CSS宽度的计算
.css教程：实现图片透明度链接效果
.css教程：position属性介绍
.CSS教程：解决商城商品图片不显示
.CSS教程：淘宝网导航交互的小三角
.CSS教程：圆角代码实现案例
.CSS教程：如何消除inline-block元
.CSS教程：如何消除inline-block元
.CSS教程：什么是inline-block元素
.CSS教程：腾讯QQ对话框抖动效果模
.CSS教程：百度首页模拟代码
.CSS教程:预处理器的Sass和less进
.CSS教程:CSS预处理器的介绍
.CSS教程:制作网页变色按钮
.CSS教程：transform属性介绍
Word教程网
Excel教程网
Dreamweaver
教程网
Fireworks教程网
PPT教程网
FLASH教程网
PS教程网
HTML教程网
DIV CSS教程网
FLASH AS教程网
ACCESS教程网
SQL SERVER教程网
C语言教程网
JAVASCRIPT教程网
ASP教程网
ASP.NET教程网
CorelDraw教程网
关于我们
|
教程购买
|
广告刊登
|
网站地图
|
湖北继续教育网
|
QQ：2693987339(点击联系)购买教程光盘
地址：湖北省武汉市曹家湾32号501室 电话：027－86646545 15972130058
--
教程购买问题汇总
21视频教程网专业的网站开发视频教程学习网站
ICP备案号：
鄂ICP备14009716号-13
公安备案号：
42011102002974
看全部视频教程
购买方式/价格
:
咨询客服
tel:
15972130058
Source Code to Run [www.21shipin.com]
QQ：2693987339(点击联系)购买教程光盘
:
