css - 向左浮动和文本居中对齐

Question

我正在尝试在网站的左侧创建一个迷你注册栏，并在中间创建一些数据页面。
所以我使用 float:left 作为迷你注册栏，使用 text-align:center 作为正文。
我读了这个Align a div to center现在尝试代替 text-align 属性，对整个 div 使用 margin: 0 auto。
但是现在 body 粘在左边的迷你注册栏上，而不是放在中间。

迷你注册栏

<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>

body 数据

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

CSS

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

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

谢谢

Answer 1

我向您的正文文本容器添加了宽度和文本对齐属性:http://jsbin.com/yofeluna/4

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