Question

我试图在网站左侧创建一个迷你注册栏，并在中间创建一些数据页。
所以我使用float:left作为迷你注册栏，text-align:center作为正文我看过这个Align a div to center，现在尝试使用text-align属性而不是margin: 0 auto属性，对整个div使用<div id="LoginOrRegister"> <form action="#" method="post" style="margin-top:30px;"> Username: <input id="text" type="text" required="required"> Password: <input type="password" required="required"></br> <input type="submit" value="Sign In"> <strong>Or</strong> <a href="#"><button>Register</button></a> </form> </div>。但现在身体贴在左边的迷你注册栏上，并没有放在中心。

迷你注册栏

        <div style="margin: 0 auto;">
        <p>
        <h1><u>some data</u></h1>
  </p>
  </div>

正文数据

#LoginOrRegister  {
  float:left;
    border: 4px solid #0279ec; 
    padding:5px; 
    width: 260px;  
    height:140px;
    }
button, input {
  cursor:pointer;
}

CSS

{{1}}

演示
http://jsbin.com/yofeluna/1

由于

Answer 1

我在您的正文文本容器中添加了width和text-align属性：http://jsbin.com/yofeluna/4

<div style="width: 100%; margin: 0 auto; text-align: center">

Answer 2

而不是margin，而是改为div：

position:absolute;
width:100%;
text-align:center;

position:absolute会确保它是屏幕的中心，而不是表单右侧任何空格的中心。

DEMO

浮动左侧和文本对齐中心

2 个答案: