Question

<div id="content" style="top: 70px;">

    <div class="row">
        <div class="col-lg-12">
            <h1  style="color: #df8a13">
            Register Now
            </h1>
        </div>
    </div><br>
    <!-- /.row -->
    <form role="form" id="register_form" action="register.php" method="post">
        <div class="row">
            <div class="col-lg-3">
                <div class="form-group">
                    <input class="form-control" name="first_name" type="text" placeholder="First Name" autocomplete="off">
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group">
                    <input class="form-control" name="last_name" placeholder="Last Name" autocomplete="off">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3">
                <div class="form-group">
                    <input class="form-control" name="phone" id="phone" placeholder="Mobile Number" autocomplete="off">
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group">
                    <input class="form-control" name="dob" id="dob" placeholder="Date of Birth" autocomplete="off">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                    <input class="form-control" name="email_id" id="email_id" placeholder="Email" autocomplete="off">                    
                </div>
            </div>
        </div>


         <div class="row">
            <div class="col-lg-2" style="width=15.667%;">
        <h3 style="color: #df8a13">Secondary school </h3>

          </div>      
            <div class="col-lg-1"> 
                <hr   width="400px" style="float:left;color:#df8a13;background-color:#df8a13;height:1px;border:none; position: relative; top: 1.0em;width: 516px;margin-left: -29px;"/>
            </div>
        </div>



        <div class="row">
            <div class="col-lg-2">
                <div class="form-group">
                    <select class="form-control" name="tenth_year" id="tenth_year"></select>  

                </div>
            </div>
            <div class="col-lg-2">
                <div class="form-group">
                    <input class="form-control" name="tenth_percent" placeholder="Percentage" autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-2">
                    <input class="form-control" name="tenth_pcm_percent" placeholder="PCM percentage" autocomplete="off">
                </div>
            </div>
        </div>


          <div class="row">
            <div class="col-lg-3" style=" width:20%">

        <h3 style="color: #df8a13">Higher secondary school</h3>

          </div>      
            <div class="col-lg-2"> 
                <hr   width="400px" style="float:left;color:#df8a13;background-color:#df8a13;height:1px;border:none; position: relative; top: 1.0em;width: 436px;"/>
            </div>
        </div>





        <div class="row">
            <div class="col-lg-2">
                <div class="form-group">
                    <select class="form-control" name="twelfth_year" id="twelfth_year"></select>  

                </div>
            </div>
            <div class="col-lg-2">
                <div class="form-group">
                    <input class="form-control" name="twelfth_percent" placeholder="Percentage" autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-2">
                    <input class="form-control" name="twelfth_pcm_percent" placeholder="PCM percentage" autocomplete="off">
                </div>
            </div>
        </div>



        <div class="row">
            <div class="col-lg-1">
                <h3 style="color: #df8a13">Graduation</h3>
            </div>      
            <div class="col-lg-3" id="hrline"> 
                <hr style="float:left;color:#df8a13;background-color:#df8a13;height:1px;border:none; position: relative; top: 1.0em;width: 594px;margin-left: 25px;"/>
            </div>
        </div>






        <div class="row">
            <div class="col-lg-2">
                <div class="form-group">
                    <select class="form-control" name="grad_year" id="grad_year" ></select>           
                </div>
            </div>
            <div class="col-lg-2">
                <div class="form-group">
                    <input class="form-control" name="grad_type" placeholder="Discipline" autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-2">
                    <input class="form-control" name="grad_percent" placeholder="Percentage" autocomplete="off">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3">
                <button type="submit" name="register_submit" style=" padding: 0px;background-color: white;border: 0px none;width: 200px;height: 50px;margin: 0 auto;text-align:                         center;margin-left: 278px;">
                    <img src="css/images/Sign%20Up.png" height="70px" width="220px">
                </button>
            </div>
        </div>
    </form>
</div>

Answer 1

HTML5中不推荐使用中心标记。使块居中的正确方法是使用

margin: 0 auto

来自http://www.w3.org/Style/Examples/007/center.en.html

有时不是需要居中的文本，而是块作为一个整体。或者，换句话说：我们想要左右边距平等。这样做的方法是将边距设置为＆＃39; auto＆＃39;。这个通常使用一个固定宽度的块，因为如果块它本身很灵活，它会占用所有可用的宽度。这是一个例子：

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}

我需要将以下div放在页面的中心

1 个答案: