精华内容
下载资源
问答
  • 如何是HTML页面中的表单居中显示

    千次阅读 2019-02-26 00:03:00
    在进行前端页面设置的时候,发现写完的form表单始终无法居中显示,详细如图1所示: 图1:问题图示 代码如下: <form class="form-inline" > <div class="form-group"> <label for=...

    在进行前端页面设置的时候,发现写完的form表单始终无法居中显示,详细如图1所示:

    图1:问题图示

    代码如下:

    <form class="form-inline" >
            <div class="form-group">
                <label for="exampleInputName2">证书编号:</label>
                <input type="text" class="form-control" id="exampleInputName2" placeholder="请准确输入证书编号">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">获证组织名称:</label>
                <input type="email" class="form-control" id="exampleInputEmail2" placeholder="输入不少于5个字符">
            </div>
            <button type="submit" class="btn btn-default">查询</button>
        </form>

     

    分析原因:form本来就只是一个表单而已,对页面根本就没有布局上的作用.,因此无论怎么设置都是无法居中的,但是依旧有办法解决的;

    解决办法:在外面套一层<div style="width:100%;text-align:center"></div>

    代码如下:

    <div style="width:100%;text-align:center">
        <form class="form-inline" >
            <div class="form-group">
                <label for="exampleInputName2">证书编号:</label>
                <input type="text" class="form-control" id="exampleInputName2" placeholder="请准确输入证书编号">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">获证组织名称:</label>
                <input type="email" class="form-control" id="exampleInputEmail2" placeholder="输入不少于5个字符">
            </div>
            <button type="submit" class="btn btn-default">查询</button>
        </form>
        </div>

     

    最终效果如图2所示:

     

     

     

    转载于:https://www.cnblogs.com/yongdongma/p/10434783.html

    展开全文
  • 如何让框中居中显示,和下面对齐? ``` ${session.id2}"> *经度: *纬度: *设备名称: *设备码: ...
  • Vue Element UI 的表单居中

    千次阅读 2020-08-24 15:21:34
    Vue Element UI 的表单居中 <style lang="scss" scoped> /deep/ .el-dialog__body { margin: 0 auto; } </style> /deep/ 深度选择器 在vue中,为了避免父组件的样式影响到子组件的样式,会在style中加...
    <style lang="scss" scoped>
    /deep/ .el-dialog__body {
      margin: 0 auto;
    }
    </style>
    

    /deep/ 深度选择器

    在vue中,为了避免父组件的样式影响到子组件的样式,会在style中加<style scoped>,这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候,就不会影响到子组件的样式。
    父组件

    <style scoped>
    .title{
      color: red;
    }
    </style>
    
    

    子组件

    <style scoped>
    .title{
      color: red;
    }
    </style>
    

    我们在加了 scoped 之后样式会自动添加一个hash值。

    .title[data-v-311f121a] {
        color: green;
    }
    .title[data-v-122f242b] {
        color: green;
    }
    

    但是这样也存在着一个问题,比如你使用了别人的组件或者自己开发一个组件,有时候你修改一处就可能影响到别的地方,这个时候要么你不用别人的组件,自己重新封装一个,但很多时候是不太现实的,所以就需要有一个方法或者方式,既不影响到别的地方,又能修改子组件在当前的样式。

    展开全文
  • 使HTML中的表单Form实现居中效果

    万次阅读 多人点赞 2020-09-16 18:48:37
    之前碰到一个作业,给了一张图片,让按照图片样式做一个表单,但在所有功能都实现后,发现无法让表单居中,一直缩在左上角,看起来很难看。在经过了各种修改后,终于成功将表单居中,下面分享一下我所经历过程中的...

    使HTML中的表单Form居中


    之前碰到一个作业,给了一张图片,让按照图片样式做一个表单,但在所有功能都实现后,发现无法让表单居中,一直缩在左上角,看起来很难看。在经过了各种修改后,终于成功将表单居中,下面分享一下我所经历过程中的错误与最终结果。(因为做这部分作业的时候还没有学 css,所以没用)

    1、刚做出来的样子

    <form>
    			<label for="firstname">名字:</label>
    			<input type="text" name="firstname" id="firstname" required="required" value="" /><br />
    		
    			<label for="lastname">姓氏:</label>
    			<input type="text" name="lastname" id="lastname" required="required" value="" /><br />
    		
    			<label for="login name">登录名:</label>
    			<input type="text" name="login name" required="required" pattern="^\w{4,8}$" id="login name" value="" />(可包含a-z、0-9和下划线)<br />
    		
    			<label for="password">密码:</label>
    			<input type="password" name="password" required="required" pattern="^[a-zA-Z]\w{5,17}$" id="password" value="" />(至少包含6个字符)<br />
    		
    			<label for="password2">再次输入密码:</label>
    			<input type="password" name="password2" required="required" pattern="^[a-zA-Z]\w{5,17}$" id="password2" value="" /><br />
    		
    			<label for="myEmail">电子邮箱:</label>
    			<input type="email" name="myEmail" id="myEmail" value="" />(必须包含@字符)
    		</form>
    

    看起来很别扭,所以要继续改进一下。。。

    2、经过修改后

    在这里插入图片描述
    看起来好像更别扭了,但是实现了居中,到这里时,我也不知道自己用的 < center> 对不对。。。

    <center>
    	<form>
    		`````
    		`````
    	</ form>
    </ center>
    

    3、使用表格布局后

    在这里插入图片描述
    这就是在经过了一晚上的修改后,最终呈现的结果。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<link rel="icon" type="text/css" href="./img/favicon.png"/>
    		<title></title>
    	</head>
    	<body>
    		<center>
    		<form action="Success.html" target="_blank" method="get">
    			<table border="0" cellspacing="" cellpadding="">
    				<tr>
    					<td><label for="firstname">名字:</label></td>
    					<td><input type="text" name="firstname" id="firstname" required="required" value="" /></td>
    				</tr>
    				<tr>
    					<td><label for="lastname">姓氏:</label></td>
    					<td><input type="text" name="lastname" id="lastname" required="required" value="" /></td>
    				</tr>
    				<tr>
    					<td><label for="login name">登录名:</label></td>
    					<td><input type="text" name="login name" required="required" pattern="^\w{4,8}$" id="login name" value="" />(可包含a-z、0-9和下划线)</td>
    				</tr>
    				<tr>
    					<td><label for="password">密码:</label></td>
    					<td><input type="password" name="password" required="required" pattern="^[a-zA-Z]\w{5,17}$" id="password" value="" />(至少包含6个字符)</td>
    				</tr>
    				<tr>
    					<td><label for="password2">再次输入密码:</label></td>
    					<td><input type="password" name="password2" required="required" pattern="^[a-zA-Z]\w{5,17}$" id="password2" value="" /></td>
    				</tr>
    				<tr>
    					<td><label for="myEmail">电子邮箱:</label></td>
    					<td><input type="email" name="myEmail" id="myEmail" value="" />(必须包含@字符)</td>
    				</tr>
    				<tr>
    					<td><label>性别:</label></td>
    					<td>
    						<input type="radio" name="sex" id="" value="male" />男<img src="./img/Male.gif" >
    						<input type="radio" name="sex" id="" value="female" />女<img src="./img/Female.gif" >
    					</td>
    				</tr>
    				<tr>
    					<td><label>头像:</label></td>
    					<td><input type="file" name="myFile" /></td>
    				</tr>
    				<tr>
    					<td><label>爱好:</label></td>
    					<td>
    						<input type="checkbox" name="hobby" id="" value="运动" />运动 
    						<input type="checkbox" name="hobby" id="" value="聊天" />聊天
    						<input type="checkbox" name="hobby" id="" value="玩游戏" />玩游戏
    					</td>
    				</tr>
    				<tr>
    					<td><label>出生日期:</label></td>
    					<td>
    						<input type="text" size="1" name="year"placeholder="yyyy" id="" value="" />年
    						<select name="month">
    							<option value ="0">[选择月份]</option>
    							<option value ="1">1月</option>
    							<option value ="2">2月</option>
    							<option value ="3">3月</option>
    							<option value ="4">4月</option>
    							<option value ="5">5月</option>
    							<option value ="6">6月</option>
    							<option value ="7">7月</option>
    							<option value ="8">8月</option>
    							<option value ="9">9月</option>
    							<option value ="10">10月</option>
    							<option value ="11">11月</option>
    							<option value ="12">12月</option>
    						</select>
    						<input type="text" size="1" name="day" placeholder="dd"/>日
    					</td>
    				</tr>
    			</table>
    			<input type="image" src="img/submit.gif" value="提交" />
    			<input type="image" src="img/reset.gif" onclick="reset();return false;" value="重填" />		
    		</form>
    		</center>
    	</body>
    </html>
    
    
    若觉得左边的标签左对齐不好看,也可以在 < td >标签中加入align=“right”,使文字右对齐
    <td align="right"><label for="firstname">名字:</label></td>
    

    在这里插入图片描述

    展开全文
  • 表单form在整个页面居中

    万次阅读 2019-01-10 14:12:11
    表单form在整个页面居中
                   

    应该在需要居中的div里面写上margin:0px auto;而不是align:center

    因为其他浏览器是不支持的...这不符合W3C..

    另外,form本来就只是一个表单而已,对页面根本就没有布局上的作用..需要的话利用div来套..

               

    再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

    展开全文
  • 在IE6、IE7下文字与input表单居中显示方法   密 码:     显示如下效果,ie6、ie7中兼容   要记住这“三剑贱”(红色部分):  li { height: 50px; line-height: 50px; vertical-...
  • layui表单居中

    万次阅读 2019-11-28 15:53:14
    在外层用text-aglin:center无法居中的问题 <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">选择框</label&g...
  • #class td /*设置表格文字左右和上下居中对齐*/ { vertical-align: middle; text-align: center; } /*class 是所属的类*/ <table class=table table-bordered border=1 width=100% style=font-size: 14pt; ...
  • 让div盒子(form表单)水平垂直居中显示 CSS没怎么学好,就这个搞得我头皮发麻,不过还好的是把他啃下来了… 废话不多说直接上代码 <style> .login-form{ //让登录框水平居中 box-shadow: 0 2px 12px 0 rgba...
  • 今天突然想改一下自己写的项目中登录页面的样式,于是行动,在加入记住我按钮后,发现input输入框没有居中显示,于是把input 和其他的一些标签整合到一个div层中,但是整个div的样式要居中显示,于是乎找到一些修改...
  • 一、div居中的几个方法display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。...
  • ElementUI的Form表单居中

    万次阅读 2020-07-21 14:57:07
    /deep/.el-dialog__body{ display: inline-block; } 多次尝试发现改不了css,应在前面加上/deep/
  • } 有无定宽皆可: flex 以下是例子效果: 三、垂直居中 1、内联元素垂直居中 (1)单行内联元素 1)使用填充 有时候,内联/文本元素可以垂直居中显示,仅仅是因为它们的上下填充相同。 .parent { padding-top: 10px; ...
  • 将input表单设置为居中,只需要设置以下三行代码: display:block; margin-left:auto; margin-right:auto 在浏览器中实现盒子的水平居中,有以下几种方式: 第一种方式:定位 父元素:position:relative; 子...
  • Layui-form表单居中解决方法

    千次阅读 2021-02-20 13:08:44
    <div class="layui-input-block"> 立即提交button> 重置button> div> div> form> 在 下添加 如代码所示,然后在form表单外加上style="text-align: center" 就可以水平居中了。 效果图:
  • javaweb_表单居中

    千次阅读 2017-12-18 16:30:27
    Created by IntelliJ IDEA. User: Administrator Date: 2017/12/13/013 ... To change this template use File | Settings | File Templates. ...相对定们的div把表单包起来,控制让其居中
  • 背景图片加表单居中

    2020-06-28 17:04:08
    body { width: 100%; height: 100vh; background: url('./img/bg.jpg') no-repeat; background-size: cover; background-position: center center;... background-attachment: fixed;... background-color:
  • element-ui from表单居中

    2021-07-08 17:58:32
    父元素:text-align: center 子元素:display: inline-block <el-row style="text-align: center"> <!-- 一级归属 --> <el-col> <el-form-item label="一级归属" prop=... s.
  • http://blog.csdn.net/spring21st/article/details/7457021 &lt;!DOCTYPE HTML&gt; &lt;html lang="en-US"&gt; &lt;head&gt; &lt;meta charset="... cont
  • form表单的底部居中

    千次阅读 2017-11-26 19:00:19
    利用css样式让form表单底部居中首先,我的html代码如下,在form表单中有和标签:<!DOCTYPE html> 底部居中 <t
  • 表单按钮居中

    千次阅读 2017-09-11 22:37:00
    http://tieba.baidu.com/p/1098809525 转载于:https://www.cnblogs.com/jrsflak/p/7507608.html
  • select下拉框的居中显示

    万次阅读 2018-09-10 15:02:56
    直接在select属性里面设置style="text-align: center; text-align-last: center;" 亲测有效
  • 不知道大家在用el-dialog弹框组件的时候有没有遇到下面图片的情况,就是弹框中的内容比较多,那么弹框是不会垂直居中的,而是贴着窗口的最底部,显然这样看起来会非常的奇怪,其实我们可以针对于它的样式来做一些...
  • Bootstrap默认的模态框不是居中显示的,需要稍微修改下源代码: 1、打开源码bootstrap.js,在里面找到如下代码: 2、在上述代码段落下面增加居中的代码即可: //使弹出框居中。。。 var $modal_dialog = ...
  • import sys from PyQt5.QtWidgets import QMainWindow, QApplication, QDesktopWidget class CenterForm(QMainWindow): def __init__(self): ... self.setWindowTitle('居中显示的窗口') # 设置窗体大小
  • element-ui中实现form表单内文字居中 在 <el-table></el-table> 标签中添加属性:cell-style='cellStyle' :header-cell-style='rowClass' <el-table :data="userlist" border stripe :cell-style='...
  • element UI 中表格的居中显示

    千次阅读 2020-09-14 16:27:30
    一、表头内容居中 方法一、 在每个el-table-column标签上边设置header-align="center" <el-table-column prop="id" label="ID" header-align="center"> </el-table-column> 方法二、 1、在el-table...
  • Html div上下左右居中显示

    千次阅读 2017-05-09 10:53:06
    实现div上下,左右居中显示,,,当是固定高度时候,很好办,,这里展示的是宽度是整个屏幕时候居中显示 源码展示: relative样式 .class{   } #div1{  width:100%;  height:400px;  ...
  • 微信小程序 元素居中

    千次阅读 2018-05-15 13:51:00
    2019独角兽企业重金招聘Python工程师标准>>> ...
  • 如何让组件中的dialog在可视区域垂直水平居中 先将dialog放到body的下层,保证自己写的样式相对于视口区域生效。element dialog文档中有个append-to-body属性,将其设置为true,会将dialog扔到body下面。 再设置一个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,931
精华内容 10,772
关键字:

表单居中显示