我是CSS的初学者(无法正确定位HTML元素),我正在为角度应用创建一个登录表单,我正在使用材质设计。
在我的应用程序中,我有以下代码,
<div class="firstDiv"></div>
<div class="secondDiv"></div>
<div class="loginDiv">
<mat-form-field>
<input matInput placeholder="Input">
</mat-form-field>
<br/>
<mat-form-field>
<input matInput placeholder="Textarea">
</mat-form-field>
</div>
注意:我将根据示例登录中的要求修改登录详细信息 图片如上。
CSS文件如下,
.firstDiv {
height: 40%;
width: 100%;
top: 0;
left: 0;
right: 0;
position: absolute;
background-color: orangered;
display: inline-block;
}
.secondDiv {
position: absolute;
width: 100%;
bottom: 0;
height: 60%;
left: 0;
right: 0;
background-color:whitesmoke;
display: inline-block;
}
.loginDiv {
position: absolute;
transform: translate(-50%, -50%);
border: black;
background-color:white;
display: flex;
flex-direction: column;
}
我无法按要求获取表单,如果屏幕尺寸减小,则登录表单根据屏幕大小不合适,登录详细信息会搞砸。
答案 0 :(得分:1)
这是一个解决方案:
body {
margin: 0;
padding: 0;
}
.container {
height: 100vh;
background: #ddd;
background-color: #23bdf5;
background: linear-gradient(to bottom, #34b9f7 0%, #34b9f7 40%, #f0f0f0 40%, #f0f0f0 100%);
position: relative;
text-align: center;
overflow: auto;
}
.center-content {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 50px;
right: 50px;
}
.form-element {
height: 50vh;
background: white;
}
<div class="container">
<h1>Title</h1>
<div class="center-content">
<div class="form-element">
this is where your form would go
</div>
</div>
</div>
通过执行以下操作:
首先,我为页面创建了一个.container
元素,并为其添加了linear gradient背景;我使用线性渐变生成器,你可以通过谷歌搜索找到一个。接下来,我将容器元素的高度设置为100vh,这是浏览器窗口高度的100%; You can read about viewport units here
在容器中,我创建了一个.center-content
元素,将内容定位为垂直在.container
元素中居中,并始终距离容器边缘50px,而不管屏幕尺寸,您可以将此值更改为适合您需要的值。
在这个示例中,我将包含表单的元素设置为50vh,只显示它的外观,但是您可以删除它并在元素内添加内容,然后添加填充以定义它的尺寸。 / p>
答案 1 :(得分:0)
你可以简单地在材质角度使用字体真棒图标
<i class="fa fa-user" aria-hidden="true"></i>
答案 2 :(得分:0)
我在loginDiv的CSS中进行了以下更改所需的对齐,
.loginDiv {
border: 1px solid black;
background: yellow;
left: 50%;
position: absolute;
top: 28%;
transform: translate(-50%);
}