登陆时标签和文本框的居中问题

原创 2018年04月15日 14:15:06

HTML:

<!DOCTYPE html>
<html>
<head>
	<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<label>用户名:<input type="text" name="username"></label>
<label>密码:<input type="text" name="password"></label>
</body>
</html>

CSS:

input{
	vertical-align: middle;;
	width: 200px;
	height: 30px;
	border: 2px solid gold;
	line-height: 30px;
}

input:focus{
	background: blue;
}

有以下几点要注意:

1.如何让用户名和用户名后面的那个文本框的中心线统一,在文本框的css样式中应用vertical-align:middle

2.如何让文本框内的输入内容居中,将文本框的高度和行高设置为同一大小,即height:30px;line-height:30px;

3.至于本例中的input:focus则是引用了css的伪类,当文本框或得焦点后改变其样式,亦可用js实现,在此仅作纪录,与本文主题无关。

关于DIV在Mozilla Firefox中的居中问题

我的页面一直是整一个最外面的DIV标记层CSS标签Text-Align设为center,然后向内的一层DIV设为Text-Align: center;来实行页面的居中的.但这样的DIV居中形式在Moz...
  • zavens
  • zavens
  • 2007-09-21 17:14:00
  • 1664

文本框中事件应用(含邮箱地址验证)4-9

文本框中事件应用 body{font-size:13px} .divInit{width:390px;height:55px;line-height:55px;padding-left:20p...
  • kuangfengbuyi
  • kuangfengbuyi
  • 2014-08-22 17:43:29
  • 702

解决DIV+CSS在FireFox中的居中问题

解决DIV+CSS在FireFox中的居中问题 margin-left:auto; margin-right:auto;
  • jam5201
  • jam5201
  • 2006-11-17 12:06:00
  • 554

mfc 静态文本框让文字居中显示

vs2008  选择这个控件-->属性 Align Text --> Center  左右居中 Center Image --> True 上下居中...
  • CKRGD
  • CKRGD
  • 2015-10-12 10:19:28
  • 2898

IE9下居中问题

在网上找了一下,发现很多都是转载以下代码版本的,但是发现这个代码只能文本居中,table、图片是不行的; 居中 原因是,div默认是占据整个浏览器宽度,所以需要定义...
  • keyler
  • keyler
  • 2013-04-08 10:32:59
  • 1525

编写程序包括一个标签、一个文本框和一个按钮,当用户单击按钮时,程序把文本框中的内容复制到标签中

import java.awt.*; import java.awt.event.*; public class CopyStringToLabel extends Frame imple...
  • u010608296
  • u010608296
  • 2014-05-21 23:14:52
  • 804

java _pro 登录

  • 2011年04月13日 15:19
  • 9KB
  • 下载

Java SWT 文本框 垂直 居中

项目需要一个垂直居中的text,翻了很多帖子,没发现有实现。 自己写一个。 具体用法和SWT Text的用法一样,当然没有把所有的text的功能加入。如果有发现还有常用的功能未曾实现,可以@我 代码如...
  • RayJang
  • RayJang
  • 2016-08-10 16:56:32
  • 1563

将Tab栏居中的方法

原始tab: 居中后的tab(边缘效果是截图的问题): 改变方法如下: 找到Android SlidingTabLayout源代码,在Android SlidingTabLayout源代...
  • xzylx1
  • xzylx1
  • 2015-12-23 15:27:43
  • 263

Word编辑技巧(图片、文本框居中)

双击图和文本框就会弹出个窗口 开Word2010文档窗口,选中需要精确设置位置的图片。在“图片工具”功能区的“格式”选项卡中,单击“排列”分组中的“位置”按钮,并在打开的菜单中选择“其他布局选项”命令...
  • yiluyangguang1234
  • yiluyangguang1234
  • 2015-03-20 16:07:09
  • 1748
收藏助手
不良信息举报
您举报文章:登陆时标签和文本框的居中问题
举报原因:
原因补充:

(最多只允许输入30个字)