Semantic UI Center ausgerichtete Login-Box?

Ich verwende das Semantic UI Framework für meine Website. Ich möchte die Login-Box in der Mitte der Seite platzieren. Ich möchte nur die Login-Box auf der Seite. Ich verstehe nicht, wie man mit den Grid-Klassen der Semantic UI zentriert wird. Bitte helfen Sie mir, die Login-Box anzupassen.Semantic UI Center ausgerichtete Login-Box?

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

Quelle

2014-12-07 reegan29

in diesem link gefunden diesen Code Siehe:

<div class="ui one column stackable center aligned page grid"> 
    <div class="column twelve wide"> 
     Your stuff here 
    </div> 
</div>

Quelle

2014-12-08 05:12:51

Vielen Dank friend.This ist einfach lo Gin Box Seite nur.So möchte ich die Box mit in der Seite als Links, Rechts, oben, unten platziert. Links und Rechts ist gut, aber Top und Bottom ist nicht richtig eingestellt.So alle Klassen dafür gefunden. – reegan29

Anstelle von "ui ein Spalten stapelbares zentriertes ausgerichtetes Seitenraster", ändern Sie es in "ui stapelbares zentriertes Seitenraster" – Pencilcheck

'Seitenraster' ist veraltet siehe [Dokumente] (http://semantic-ui.com/collections/grid .html #/Übersicht). – Alex

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

Quelle

2015-04-20 05:54:41

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

Quelle

2015-04-30 10:10:27 cosbor11

Semantic UI Center ausgerichtete Login-Box?

Antwort

Verwandte Themen