form表单的底部居中
程序员文章站
2022-04-29 17:19:36
...
利用css样式让form表单底部居中
首先，我的html代码如下，在form表单中有<textarea>和<input>标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>底部居中</title>
</head>
<body>
<div class="zj_div">
<form id="zj_form">
<textarea rows="4" cols="60" name="text" id="zj_textarea"></textarea>
<br>
<input type="submit" value="Send out"/>
</form>
</div>
</body>
</html>原始的模样如下
由图可见，与页面的顶部以及左边都会有一些默认的边距，为了更好的达到居中的效果，我们先来清除这些默认的边距；
在<head>标签内添加内联的的css，也就是添加<style>标签；
首先先对全局标签的默认样式进行清除
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
</style>添加过后可见，此时是完全在视窗左上角的（为了方便观察我给它添加了一个背景色）；
下面就是开始改样式来让它底部居中了
首先，为了避免不必要的麻烦，可以现在form表单外部添加一个<div>将其包裹起来，此处我给它定义的class=“zj_div”；
添加的css样式如下；
.zj_div{
width: 100%;
text-align: center;
bottom: 0px;
position: fixed;
}效果图如下
实现了底部居中
当然会发现其实将这四行代码放在zj_form的样式中也可以达到效果；但是这样的话，<div>没有高度
下面来解释一下这四行代码
width:100%;
宽度需要设置成100%，才能在使用后面的center时保证元素居中显示；若不设置此属性，默认会居左显示；text-align:center;
设置元素的水平对其方式，值为center时保证其居中对齐，此时<textarea>和<input>都会居中对齐；bottom:0px;
到其包含元素底部的距离为0px，保证其在底部；position:fixed;
规定元素的定位类型，使其固定，此处就是固定在底部；总结
1、刚开始第一眼觉得，不就是个底部居中，自认为很简单，但是真正上手去做的时候，花了很久都没有达到理想的效果；甚至添加了一大串的样式，都不是真正意义上的固定底部居中；
2、在网上查找答案的时候，发现都不怎么全面，是存在漏洞的，就想着自己去思考去解决问题；
3、后来达到效果后，再删减冗余的代码，最终起作用的就是这四句了，以及前面为了让效果更完美对全局的设定；可以说是我认为最简单的方法了；