web-dev-qa-db-fra.com

aligner le centre du panneau de démarrage de la page Web

Je voudrais aligner tout le centre du panneau de la page Web. Quelqu'un pourrait-il m'aider à ce sujet? Aussi pourriez-vous s'il vous plaît m'aider un bon livre que je peux utiliser pour apprendre le design bootstrap.

<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
            <div class="panel-heading">
                <h3 class="panel-title text-center">User Login</h3>
            </div>
            <div class="panel-body">
                @Html.ValidationSummary(true)

                <table class="table">
                    <tbody>
                        <tr>
                            <td>@Html.LabelFor(model => model.Username)</td>
                            <td>@Html.EditorFor(model => model.Username)</td>
                            <td>@Html.ValidationMessageFor(model => model.Username)</td>                            
                        </tr>
                        <tr>
                            <td>@Html.LabelFor(model => model.Password)</td>
                            <td>@Html.EditorFor(model => model.Password)</td>
                            <td>@Html.ValidationMessageFor(model => model.Password)</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <input type="submit" value="Login" class="btn btn-default" style="" />
                            </td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>             

            </div>
        </div>

En vous remerciant Swetha

htmlcssasp.net-mvctwitter-bootstrap
6
user3175327

Vous pouvez supprimer le style CSS de panel et l’envelopper comme suit.

<div class="col-sm-6 col-sm-offset-3">
  <div class="panel panel-default">
    ...
  </div>
</div>
13
Murtza

il suffit d'ajouter 

position: fixe

et il le gardera en vue même si vous faites défiler l'écran vers le bas. voir à http://jsfiddle.net/xyrkyxe8/

#mydiv {
position:fixed;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
0
Garth Sebastian