Семантический выравниваемый интерфейс пользователя в интерфейсе пользователя?

Я использую рамки семантического интерфейса для своего сайта. Я хочу разместить окно входа в центр страницы. Мне нужно только окно входа на страницу. Я не понимаю, как выровнять по центру с использованием сеточных классов семантического интерфейса. Пожалуйста, помогите мне, как установить окно входа в систему.Семантический выравниваемый интерфейс пользователя в интерфейсе пользователя?

Мой код:

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

источник

2014-12-07 reegan29

Посмотреть этот код найден в этом link:

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

источник

2014-12-08 05:12:51

Спасибо вам так много friend.This просто вот gin box page only. Так что я хочу поместить коробку на страницу как влево, вправо, сверху, снизу. Влево и вправо хорошо, но Top и Bottom не установлены должным образом. Такие классы найдены для этого. – reegan29

Вместо «ui один столбец с возможностью выравнивания по центру», измените его на «ui stackable centered page grid» – Pencilcheck

'page grid' устарел, см. [Docs] (http://semantic-ui.com/collections/grid .html #/обзор). – Alex

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

источник

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>

источник

2015-04-30 10:10:27 cosbor11

Семантический выравниваемый интерфейс пользователя в интерфейсе пользователя?

ответ

Смежные вопросы