web-dev-qa-db-fra.com

Boîte de connexion alignée au centre de l'interface sémantique?

J'utilise le framework d'interface utilisateur sémantique pour mon site web. Je souhaite placer la zone de connexion au centre de la page. Je souhaite uniquement la zone de connexion de la page. Je ne comprends pas comment centrer aligné à l'aide de «classes de grille» de l'interface utilisateur sémantique. S'il vous plaît, aidez-moi à 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>
htmlcsssemantic-ui
10
reegan29

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>
28
Lúcio Rubens
<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>
3
cosbor11

<div class="ui segment" style="margin: 0 auto;">
     <h4 class="ui dividing header">Account Info</h4>
     <div class="ui form">
         ........
     </div>
</div>

0
Maxim Kovalevsky