Question

我有两个问题，如下所述： -

1）我想将蓝色矩形框（包含用户名和密码文本字段）移动到页面中心。我尝试使用＆amp; nbsp 来更改矩形框的位置，但很奇怪，它根本没有移动。是否HTML中有任何参数可以帮助我将此框移动到页面的中心？任何人都可以建议我如何实现这一目标？

2） BORDER = 8 参数不能正常工作我想在矩形框周围设置深黑色边框。任何人都可以建议这个问题的原因是什么？

要复制我面临的问题，请将以下代码复制到.TXT文件中并将其另存为.HTML文件。在IE浏览器或Firefox浏览器中打开以查看我遇到的问题。

代码：

<html>
<form id="login" action="index.html">
<div style="width: 450px; height: 250px; background: blue;BORDER=8"><br/><br/><br/>
&nbsp;<strong>Username: </strong>&nbsp; <input type="text" name="userid" size="18" maxlength="18"/><br/>&nbsp;<br/>
&nbsp;<strong>Password : </strong> &nbsp; <input type="password" name="pswrd" size="18" maxlength="18"/>&nbsp;<br/><br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" value="Submit"> &nbsp;&nbsp;
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form"/> &nbsp;&nbsp;&nbsp 
&nbsp;</div><br/><br/>

</form>

</html>

Answer 1

如果您想要真正的动态定位，请使用下面不依赖于指定尺寸的内容。重要的是，它使用CSS表格布局来进行位置计算。可以通过提供form border:8px solid black;

来实现边框

您还应该将样式从内联指定中移除 - 并使用CSS来控制布局，而不是依赖于如此多的HTML（例如 ）。

Demo Fiddle

HTML

<div class='table'>
    <div class='cell'>
        <form id="login" action="index.html">
            <label>Username:</label>
            <input type="text" name="userid" size="18" maxlength="18" />
            <br />
            <label>Password :</label>
            <input type="password" name="pswrd" size="18" maxlength="18" />
            <br />
            <input type="submit" value="Submit" />
            <input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
        </form>
    </div>
</div>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
label {
    font-weight:bold;
    margin-right:10px;
}
.table {
    display:table;
    text-align:center;
    width:100%;
    height:100%;
    table-layout:fixed;
}
.cell {
    display:table-cell;
    vertical-align:middle;
}
form {
    display:inline-block;
    border:8px solid black;
    width: 450px;
    padding:50px 0;
    background: blue;
}
input {
    margin-bottom:15px;
}

Answer 2

如果您只想横向居中，请尝试使用：margin:0 auto;

http://jsfiddle.net/P2rQK/

<div style="width: 450px; height: 250px; background: blue;margin:0 auto;">
    <form id="login" action="index.html">
        <strong>Username: </strong>&nbsp; <input type="text" name="userid" size="18" maxlength="18"/> 
        <strong>Password : </strong>&nbsp; <input type="password" name="pswrd" size="18" maxlength="18" />
        <input type="submit" value="Submit" />
        <input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
    </form>
</div>

使用 来定位元素是不好的。 <br />也不是＆＃34;清洁＆＃34;方式。

Answer 3

虽然这不是一个问题：

<div style="position: absolute; left: 50%; margin-left: 225px; width: 450px; height: 250px; background: blue; border: 8px solid black"> content </div>

位置绝对，左边50％，边距左边：-225px（半边宽）将框放在屏幕中间。
border：8px纯黑色是定义宽度为8px的边框的正确方法

Answer 4

您需要将margin: 0 auto;添加到蓝框中。

看看这个Demo

Answer 5

<div style="border-width:8px;border-color:red;border-style:solid;width:450px;height:1050px;background-color:gold;"> content </div>

Answer 6

我建议使用更多的CSS，少用 和<br>。

`    <html>
    <style>
        #login { 
            left: 50%;
            width: 200px;
            margin-left: -225px;
            position: relative;
        }
        div {
            width: 450px; 
            height: 250px; 
            background: blue; 
            border:8px solid #000;
            padding:20px;
        }

    </style>
    <form id="login" action="index.html">
        <div>
            <strong>Username: </strong>&nbsp; <input type="text" name="userid" size="18" maxlength="18"/><br>
            <strong>Password : </strong> &nbsp; <input type="password" name="pswrd" size="18" maxlength="18"/><br>
            <input type="submit" value="Submit"><br>
            <input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
        </div>
    </form>
</html>`

尝试使用边距来确保定位正确。

如何将HTML矩形框放在页面的中心

6 个答案:

Demo Fiddle