Sémantique de l'INTERFACE utilisateur alignées au centre boîte de connexion?

Je suis en utilisant la Sémantique de l'INTERFACE utilisateur-cadre pour mon site. Je veux placer la boîte de connexion dans le centre de la page.Je ne veux que la boîte de connexion dans la page. Je ne comprends pas comment alignées au centre à l'aide de la Sémantique de l'INTERFACE utilisateur de la grille des classes. S'il vous plaît aidez-moi comment s'adapter à la boîte de connexion.

Mon Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my semantic website</title>
<link rel="stylesheet" href="../css/semantic.min.css">
<link rel="stylesheet" href="../css/style.css">
<script src="../js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8" async defer>     </script>
<script src="../js/semantic.min.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
<div class="ui grid">
    <div class="one column row">
        <div class="ui padded grid">
            <div class="three column row">
                <div class="column">
                    <div class="ui segment">
                        <h4 class="ui dividing header">Account Info</h4>
                        <div class="ui form">
                            <div class="field">
                                <label for="username">Username: </label>
                                <div class="ui icon input">
                                    <input type="text" placeholder="Username" name="username" id="username">
                                    <i class="user icon"></i>
                                </div>
                            </div>
                            <div class="field">
                                <label for="password">Password: </label>
                                <div class="ui icon input">
                                    <input type="password" placeholder="Password" name="password" id="password">
                                    <i class="lock icon"></i>
                                </div>
                            </div>
                            <input type="submit" name="submit" class="ui inverted blue button">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

OriginalL'auteur reegan29 | 2014-12-07

  1. 28

    Voir ce code trouvé dans ce lien:

    <div class="ui one column stackable center aligned page grid">
   <div class="column twelve wide">
       Your stuff here
   </div>
</div>
    Merci beaucoup ami.C'est simple boîte de connexion de la page seulement.Je tiens donc placé la boîte dans la page de Gauche,Droite,haut,bas. Gauche et de Droite est bien mais le Haut et le Bas n'est pas réglé correctement.De sorte que toute les classes de découverte pour cela.
    Au lieu de "l'interface utilisateur d'une colonne empilables centre aligné la grille de page", changer à "l'interface utilisateur empilables centrée sur la grille de page"
    page grid a été déprécié, voir docs.

    OriginalL'auteur Lúcio Rubens

  2. 3
    <div class="ui column stackable center page grid">
  <div class="four wide column"></div><!-- empty div just padding -->
  <form class="ui six wide column form segment">
     <!-- login input fields go here -->
  </form>
</div>

    OriginalL'auteur cosbor11