代码笔记---DIV居中代码样式

最新推荐文章于 2022-07-27 13:26:16 发布

宁静的飞飞

最新推荐文章于 2022-07-27 13:26:16 发布

阅读量132

点赞数

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/jixufly/article/details/118206906

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

DIV居中代码样式

<head>
<meta charset="utf-8">
<title>文档标题</title>


<style type="text/css">
.frminput {
    position: relative;
    width: 100%;
    height: 40px;
    margin-bottom: 30px;
} 
.label {
    position: relative;
    width: 100%;
    height: 40px;
    margin-bottom: 30px;
    font-size:xx-large;
}
.ele {
    position: absolute;
    left:10%;
    width:80%;
    height:70%;
    top:2%;
}
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 5px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius:12px;
    margin-left:20px;
}
.buttonhover:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.btn { 
    position: relative;
    width: 100%;
    height: 30px;
    margin-top: 30px;
    display: flex;/*设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效*/
    display: -webkit-flex; /* Safari */
    flex-direction: row;/*容器内项目的排列方向(默认横向排列 row,纵向是column)*/
    flex-wrap: nowrap;/*容器内项目换行方式*/
    justify-content: center;/*项目在主轴上的对齐方式*/
    align-items: center;/*项目在交叉轴上如何对齐*/
    align-content: center;/*定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用*/
}
</style>
</head>
<body style="background-color:blue;"> 
<div id="ele" class="ele">
  <form name="frm"  >
    <span class="label" >ID:</span> 
    <input class="frminput" id = "staffid"/>
    <span class="label" >Name:</span> 
    <input class="frminput"  id = "staffname"/>
    <span class="label" >Phone:</span> 
    <input class="frminput"  id = "staffphone"/>
    <span class="label" >Address:</span>  
    <input class="frminput"  id = "staffaddress"/>
    <div  class="btn" >
    <div class="button buttonhover"  id = "btnSubmit" /> Submit</div> 
    <div class="button buttonhover"  id = "btnCancel" /> Cancel</div> 
    </div>
    
  </form>
</div>


</body>

宁静的飞飞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
代码笔记---DIV居中代码样式

DIV居中代码样式<head><meta charset="utf-8"><title>文档标题</title><style type="text/css">.frminput { position: relative; width: 100%; height: 40px; margin-bottom: 30px;} .label { position: relative;
复制链接

扫一扫

专栏目录