HTML form 垂直水平居中

最新推荐文章于 2023-09-18 15:02:14 发布

จุ๊บ江边星辰

最新推荐文章于 2023-09-18 15:02:14 发布

阅读量2.1k

点赞数

HTML中body代码：

<body>

  <div class="divForm">
   <form action="" method="post">
    <p>
    欢迎登陆网站主页
    </p>
    <p>
    用户名：<input type="text" name="username"/>
    </p>
    <p>
    密   码：<input type="password" name="password"/>
    </p>
    <input type="submit" value="提交"/>
   </form>
    </div>
  </body>

然后，head中的style代码:

<style type="text/css">
    .divForm{
        position: absolute;/*绝对定位*/
        width: 500px;
        height: 200px;

        text-align: center;/*(让div中的内容居中)*/
        top: 50%;
        left: 50%;
        margin-top: -300px;
        margin-left: -300px;
    }
</style>

各位朋友可亲测，完了后，将border: 1px solid red;去掉即可

原文：https://blog.csdn.net/nick520920/article/details/51774751

第二种：

head中style

<style type="text/css">
    body{
        text-align: center;
       margin:0 auto;

    }
    .divForm{
        display: inline-block;
    }
</style>

body中代码：

<body>
<h1 style="text-align: center">图书借阅系统---后台管理</h1>
<form action="javascript:search()" method="post"  id="search">
    图书名称：<input type="text" name="bookName" id="bookName" value=""/> 
    <input type="submit" value="查询"/>
    <input type="hidden" name="pageindex" id="pageindex" value="1"/>
    <button οnclick="add()" style="width: 50px;height: 25px">新增</button>
</form>
    <table id="tt" class="divForm" border="1">
        <tr style="background-color:grey">
            <td>图书编号</td>
            <td>图书分类</td>
            <td>图书名称</td>
            <td>作者</td>
            <td>出版社</td>
            <td>入库时间</td>
            <td>是否借阅</td>
            <td>操作</td>
        </tr>
    </table>

</body>

จุ๊บ江边星辰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML form 垂直水平居中

HTML中body代码：<body><div class="divForm"><form action="" method="post"><p>欢迎登陆网站主页</p><p>用户名：<input type="text" name="username"...
复制链接

扫一扫