form 表单底部居中

最新推荐文章于 2021-08-05 00:14:41 发布

maggie_xff

最新推荐文章于 2021-08-05 00:14:41 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/sinat_38589469/article/details/78657192

版权

最近新发现了一个问题,大部分的标签都可以依靠 margin，padding 使其底部居中， form 表单就是一个特例：单纯的 margin , padding 并不能达到我们想要的效果。

奇怪，发表的代码莫名其妙多了一堆 span 标签，复制后一定要删除后在看结果

为此，我也在网上查过一下方法，希望有大神可以解决，但是很无奈，找到的基本都是和我一样的想法：

大多数第一次听到这个问题的人都会说：这个很简单啊，加一个div 盒子，然后让合资底部剧中不就好了，最多就是加一个定位绝对可以了。但是，按照网上贴出来的代码我进行了验证，发现：你们都是骗我的啊。。。。。。

大部分都是光说不做，什么加个盒子，再用个margin，宽度你自己去调呗，唉，说多了心累啊。接下来我贴出我的代码来供大家参考：

第一种方法：基本都是基础样式

定位+tac+上下左右

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #hh{
        	
            width: 100%;
            position: relative;
        }
        #wiselyForm {
            text-align: center;
            position: absolute;
            bottom: 0;
            left:0;
            right:0;
            position: fixed;
        }
    </style>
</head>
<body>
<div id="hh">
    <form id="wiselyForm">
        <textarea rows="4" cols="60" name="text" id="wbk" ></textarea>
        <input type="submit" value="Send out"/>
    </form>
</div>

</body>
<html>

第二种方法：flex 布局（想了解更多的可以百度一下，好多老外的布局网站写的都很不错，遍地都是啊。。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
    	*{
            margin: 0;
            padding: 0;
        }
        #hh {
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            text-align: center;
        }
        #wiselyForm {
            flex: 1;
        }
    </style>
</head>

<body>
    和上边的一样，不做重复了。
</body>

<html>

注意：重要部分已在涂上为大家标明，如果你写的是移动端的话最好是加上meta 这句：

<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

平常养成一个还习惯最好不过了

差点忘记，效果展示一下：（页面缩放后也没有任何问题呢）

maggie_xff

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
form 表单底部居中

最近新发现了一个问题,大部分的标签都可以依靠 margin，padding 使其底部居中， form 表单就是一个特例：单纯的 margin , padding 并不能达到我们想要的效果。为此，我也在网上查过一下方法，希望有大神可以解决，但是很无奈，找到的基本都是和我一样的想法：大多数第一次听到这个问题的人都会说：这个很简单啊，加一个div 盒子，然后让合资底部剧中不就好了，最多就是加一个
复制链接

扫一扫