div里面如何用CSS控制input输入文本框对齐-HTML教程-爱易网页

div里面如何用CSS控制input输入文本框对齐

日期：2014-05-17　浏览次数：20973 次

div里面怎么用CSS控制input输入文本框对齐
问题就是这个问题，弄的我好郁闷啊，input文本框对齐不了，不知道怎么弄，百度上面说在input里面运用vertical-align: middle;但是我用了不行啊，实在不知道怎么办了，如果不用CSS控制，用JavaScript怎么来控制啊，学的知识有限，请高手帮帮忙啊，代码如下

HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>注册页面</title>
        <style type="text/css">
body {
    background-image: url(/practice/0105.gif)
}

.aa {
    float: right;
}

.box {
    position: absolute;
    width: 800px;
    height: 500px;
    left: 50%;
    top: 50%;
    margin-left: -400px;
    margin-top: -250px;
    text-align: center;
    border: outset;
    border-color: #FFFFFF;
    background-color: #FBF5E6;
}

#boxhead1 {
    text-align: left;
}

#boxhead2 {
    text-align: left;
}

#boxhead3 {
    text-align: left;
}
</style>
    </head>
    <body>
        <div class="aa">
            <a href="1.html">返回登陆首页</a>
        </div>
        <div class="box">
            <div id="boxhead1">
                <hr>
                <h3>
                    选择账号名称
                </h3>
            </div>
            <br>
            账号：
            <input type="text">
            6-12位之间，请用英文小写、数字，不能全部是数字。
            <br>
            <br>
            <div id="boxhead2">
                <hr>
                <h3>
                    设置安全信息
                </h3>
            </div>
            设置登录密码：
            <input type="text">
            6-12位字符（字母、数字）
            <br>
            <br>
            再次输入密码：
            <input type="text">
            请保证与第一次输入的密码一致。
            <br>
            <br>
            <div id="boxhead3">
                <hr>
                <h3>
                    填写验证码
                </h3>
            </div>
            <br>
            验证码：
            <input type="text">
            <br>
            <br>
            <input type="submit" value="提交" size="15">
        </div>
    </body>
</html>

------解决方案--------------------
把 text-align:center去掉。然后在账号和验证码字的后面加空格（ ）对齐。
另左对齐改写成
#boxhead1,
#boxhead2,
#boxhead3{text-align: left;}.
减少重复代码。或者写个通用样式.tl{text-align: left;}直接在那几个加入
------解决方案--------------------

探讨

把 text-align:center去掉。然后在账号和验证码字的后面加空格（&nbsp;）对齐。
另左对齐改写成
#boxhead1,
#boxhead2,
#boxhead3{text-align: left;}.
减少重复代码。或者写个通用样式.tl{text-align: left;}直接在那几个加入

------解决方案--------------------
楼主既然要用CSS而不太想改成JS来布局，让我帮你微调一下吧。以下是BODY中的内容，复制上去即可实现，希望对你有用：
<body>
<div class="aa">
<a href="1.html">返回登陆首页</a>
</div>
<div class="box">
<div id="boxhead1">
<hr>
<h3>
选择账号名称
</h3>
</div>
<p style="margin-left:80px;">账号：
<input type="text">
6-12位之间，请用英文小写、数字，不能全部是数字。</p>
<br>
<div id="boxhead2">

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

div里面如何用CSS控制input输入文本框对齐

相关资料更多>

推荐阅读更多>