Html 语义用户界面中心对齐登录框？_Html_Css_Semantic Ui

Html 语义用户界面中心对齐登录框？

html css

Html 语义用户界面中心对齐登录框？,html,css,semantic-ui,Html,Css,Semantic Ui,我正在为我的网站使用语义UI框架。我想将登录框放在页面的中心。我只想在页面中显示登录框。我不明白如何使用语义UI“网格类”来对齐中心。请帮助我如何安装登录框我的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>my semantic website</title> <link rel="stylesheet" href=

我正在为我的网站使用语义UI框架。我想将登录框放在页面的中心。我只想在页面中显示登录框。我不明白如何使用语义UI“网格类”来对齐中心。请帮助我如何安装登录框

我的代码：

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


我的语义网站
帐户信息
用户名：
密码：

请参见以下代码：


你的东西在这里


帐户信息
........

这是我的实现，它运行良好

HTML


标题
字幕
Lorem ipsum，dolor sit amet Concertetur Adipising Elite。Ab，别名
额外内容

CSS

#v型集装箱{
背景：ddd；
高度：100vh；
宽度：100%；
}
.图像边距{
边缘顶部：16px；
边缘底部：16px；
}
.图像边框{
边界半径：4px！重要；
}
1.没有背景{
背景：透明！重要；
}

非常感谢你的朋友。这只是一个简单的登录框页面。所以我想在页面中按左、右、上、下放置带有的框。左侧和右侧都很好，但顶部和底部的设置不正确。因此，找到任何此类。将其改为“ui一栏可堆叠居中对齐的页面网格”，改为“ui可堆叠居中页面网格”

页面网格

已被弃用，请参阅。

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

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