浮动左和文本对齐中心 [英] Float left and text-align center

问题描述

我试图在网站左侧创建一个小型注册栏，并在中间创建一些数据页面。

所以我使用 float：左表示微型寄存器列， text-align：center 表示正文。

我读这个将一个div浮动到中心，现在尝试代替 text-align 属性，对于整个div使用 margin：0 auto 。

但是现在的主体粘在左边的微寄存器条和isn放在中心。

I'm trying to create a mini-register bar on the left side of the site, and on the middle to create some data page.
So I used float:left for the mini-register bar and text-align:center for the body.
I read this Float a div to center and now tried instead of text-align property, use margin: 0 auto for whole div.
But now the body sticks to the left mini-register bar and isn't placed on the center.

小型注册栏

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

CSS

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

演示

http://jsbin.com/yofeluna/1

感谢

推荐答案

取代 margin c $ c> div this：

Instead of margin, give your div this instead:

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

position：absolute

这篇关于浮动左和文本对齐中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！