怎样使html中的上下2个text文本框对齐?

怎样使html中的上下2个text文本框对齐?,第1张

<table><tbody><tr> <td>文字</td><td><input type="text"></td> <td>文字</td><td><input type="text"></td> <td>文字</td><td><input type="text"></td> <td>文字</td><td><input type="text"></td> </tr></tbody></table> 

HTML超文本置标语言,用以描述超文本,是为网页创建和其它可在网页浏览器中看到的信息设计的一种置标语言。

HTML文本框文字对齐方式:

1、baseline:默认。元素放置在父元素的基线上。

2、sub:垂直对齐文本的下标。

3、super:垂直对齐文本的上标。

4、top:把元素的顶端与行中最高元素的顶端对齐。

5、text-top:把元素的顶端与父元素字体的顶端对齐。

6、middle:把此元素放置在父元素的中部。

7、bottom:把元素的顶端与行中最低的元素的顶端对齐。

8、text-bottom:把元素的底端与父元素字体的底端对齐。

9、inherit:规定应该从父元素继承 vertical-align 属性的值。

代码:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=GBK">

<style>

.login { overflow:hidden width:300px}

.login .login-item { padding:10px 0 overflow:hidden clear:both line-height:25pxpadding:0px}

.login .login-item label { float:left text-align:right width:80px}

.login .login-item div { float:left}

.login .login-tools { text-align:center}

</style>

</head>

<body>

<div class="login">

    <div class="login-item">

        <label>用户名:</label>

        <div><input type="text" /></div>

    </div>

    

    <div class="login-item">

        <label>密码:</label>

        <div><input type="password" /></div>

    </div>

    <div class="login-tools">

     <input type="button" value="登录" />

     <input type="button" value="重置" />

    </div>

</div>

</body>

</html>

效果:

左右居中:margin:0 auto

上下居中:设置父级div高度(假设为300px);设置table的高度(假设为100px)。

text-align:center主要针对的是文字,比如>、之类的, 如果只是图片的话就要设置margin了, 另外,可能是我理解错你的意思了,你的text-align:center是想作用到table吗,这是不行的,margin才可以。

扩展资料:

超级文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(WWW)盛行的原因之一,其主要特点如下:

简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便。

可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。

平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。

通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

参考资料:百度百科:HTML

菜鸟教程:HTML教程


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7436141.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-05
下一篇 2023-04-05

发表评论

登录后才能评论

评论列表(0条)

保存