input文本框和验证码对齐问题解决

最新推荐文章于 2023-12-29 18:27:37 发布
最新推荐文章于 2023-12-29 18:27:37 发布
阅读量6.2k 收藏 2
点赞数 2
分类专栏： 编程 前端 文章标签： 编程 标签 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ya_feng/article/details/23207067
版权

在制作网页过程中经常会将input 和 验证码放在同一行实现左侧输入右侧验证码，不过与此同时出现的一个问题是文本框和验证码的水平对齐问题。因为将 input 和 img 放在同一行，img标签总是比input高出一部分，非常惹人厌，不知道你们怎么想的，反正我看不下去~~~ 


下面是解决方法：

CSS实现input和img（验证码）水平对齐的方法 

同时给input和img添加vertical-align:middle就行了


废话不多说，直接上代码：

input,img {
    vertical-align:middle;
}



（完）









 

 
 






 

 

 
 






 


                

        

        

    

  


    

      

        

            

              
                
                  Maratrix
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
input文本框和img验证码对齐问题(img总比input高出一个头)

				
			

			

				

					09-28
				

			

		

		

			
				
标题提到的问题——"input文本框和img验证码对齐问题(img总比input高出一个头)"，是一个常见的布局挑战，特别是在设计登录表单或需要用户验证身份的场景。这个问题主要出现在将`<input>`元素（文本框）与`<img>`元素...

			
		

	



                

              
                



	

		

			

				
					
input实现手机验证码输入

				
			

			

				

					qq_45832807的博客
				

				

					10-27
					
					620
					
				

			

		

		

			
				
【代码】input实现手机验证码输入。

			
		

	



                


  
              

                


	

		

			

				
					
SpringBoot整合kaptcha生成、校验验证码

				
			

			

				

					liangshitian的博客
				

				

					11-10
					
					1746
					
				

			

		

		

			
				
项目中需要加入验证码校验，本文记录了验证码验证的验证码生成和校验过程，使用的是Google的 kaptcha 框架，kaptcha是非常好的工具。

1、pom引入


        <!--图片验证码-->
        <dependency>
            <groupId>com.github.penggle</groupId>
            <artifactId>kaptcha</artifactId&gt

			
		

	





	

		

			

				
					
页面中验证码和文本框不对齐的情况

				
			

			

				

					无能开发者
				

				

					05-17
					
					1177
					
				

			

		

		

			
				
小白昨天晚上写代码，遇到了验证码与相对应的input文本框不对齐的情况，这还了得，小白立马打开度娘。输入这个问题。才发现问题是如此的简单。` 代码如下。“`ValidateCode, #imgId {    vertical-align:middle;
    }`

			
		

	



		

			
		



	

		

			

				
					
关于Input文字格式的对齐问题

				
			

			

				

					qq_42610806的博客
				

				

					07-09
					
					2403
					
				

			

		

		

			
				
&lt;style&gt;        form{            width: 400px;            padding: 20px 0;            margin: 0 auto;        }        form &gt;label{            display: inline-block;            width: 100%;    ...

			
		

	





	

		

			

				
					
HTML中input标签对齐问题

				
			

			

				

					riCkee的博客
				

				

					02-20
					
					1万+
					
				

			

		

		

			
				
今天在练习的时候遇到了一点小问题，稍作记录希望下次遇到可以有点印象。
简单说明一下就是要编写一个搜索框，搜索框分为两块，一块是左边的文本框s_text，一块是右边的搜索按钮s_button，具体的HTML代码如下：
<div class="searchbox">
	<input class="s_text" type="text" value="hotwords"><...

			
		

	





	

		

			

				
					
input 文本框 文字垂直居中对齐 ie firefox

				
			

			

				

					09-25
				

			

		

		

			
				
标题“input 文本框 文字垂直居中对齐 ie firefox”揭示了一个跨浏览器兼容性的问题，即在Internet Explorer（IE）和Firefox中，通过CSS样式实现文字垂直居中的方式有所不同。  首先，让我们来看看在IE中如何实现...

			
		

	





	

		

			

				
					
JS简单获取并修改input文本框内容的方法示例

				
			

			

				

					12-10
				

			

		

		

			
				
在JavaScript中，获取和修改HTML页面上的input文本框内容是常见的操作，特别是在动态交互的网页应用中。本文将深入探讨如何使用JavaScript的`getElementById()`方法来实现这一功能。  一、`getElementById()`方法...

			
		

	





	

		

			

				
					
Vue 实现登录界面 验证码

				
			

			

				

					qq_40320637的博客
				

				

					01-02
					
					6124
					
				

			

		

		

			
				
登录界面

SIdentify
创建验证码组件，实现绘画出图片验证码`
<template>
  <div class="s-canvas">
    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
  </div>
</te...

			
		

	





	

		

			

				
					
element-ui中对输入框进行验证

				
			

			

				

					m0_68231587的博客
				

				

					06-03
					
					2315
					
				

			

		

		

			
				
表示必填项，"message" 属性定义了验证失败时的错误提示信息，"trigger" 属性定义了何时触发验证。可以使用正则表达式对输入框进行验证，确保输入的日期格式正确且不包含0开头的月和日。在 element-ui 中，你可以使用。等组件来实现输入框的验证。

			
		

	





	

		

			

				
					
vue+element实现登录界面（图片验证码、记住密码）

				
			

			

				

					stb666666的博客
				

				

					03-31
					
					8185
					
				

			

		

		

			
				
用户名+密码+验证码登录
验证码：前端绑定后端生成得验证码图片，前端提交表单信息到后端进行验证，后端验证码存入session
记住我：将用户名密码存入cookies
1、login.vue代码
<template>
  <div class="login-wrap">
    <div class="ms-title">'音酷'-后台管理系统</div>
    <div class="ms-login">
      <!-- ruleFo

			
		

	





	

		

			

				
					
大数据就业方向_大数据专业就业前景

				
			

			

				

					weixin_39530839的博客
				

				

					11-24
					
					735
					
				

			

		

		

			
				
近几年来，互联网行业发展风起云涌，而移动互联网、电子商务、物联网以及社交媒体的不断发展更促使我们进入了大数据时代。截止到目前，人们日常生活中的数据量已经从TB(1024GB=1TB)级别一跃升到PB(1024TB=1PB)、EB(1024PB=1EB)乃至ZB(1024EB=1ZB)级别，数据将逐渐成为重要的生产因素，人们对于海量数据的运用将预示着新一波生产率增长和消费者盈余浪潮的到来。大数据时代...

			
		

	





	

		

			

				
					
小程序中input输入框如何实现文本右对齐

					
热门推荐

				
			

			

				

					weixin_51375107的博客
				

				

					07-14
					
					1万+
					
				

			

		

		

			
				
小程序中偶尔会有让文字右对齐的需求

我们设置input标签的css样式text-align: right;即可
input{
    text-align: right;
}


当我们只想让输入框中默认字体向右对，其我们可以这样

<input placeholder="请输入" placeholder-style='text-align:right'></input>



...

			
		

	





	

		

			

				
					
输入框对齐

				
			

			

				

					qq_62244121的博客
				

				

					10-28
					
					2948
					
				

			

		

		

			
				
输入框对齐方式，适用登录注册，信息完善等界面，包含html和bootstrap两种方式

			
		

	





	

		

			

				
					
vue+elementui 实现登录验证码功能

				
			

			

				

					m0_53553562的博客
				

				

					03-31
					
					1万+
					
				

			

		

		

			
				
最终实现效果（点击图片进行切换 及 验证登录）

html
// getCode() 点击调切换图片
// @keyup.enter.native="handleLogin" 回车登录 事件
//loginForm.code 你输入的验证码
 <el-form-item prop="code">
      <el-input
        v-model="loginForm.code"
        auto-complete="off"
        placeholder="

			
		

	





	

		

			

				
					
vertical-align 表单文字垂直居中

				
			

			

				

					weixin_34161064的博客
				

				

					03-18
					
					1166
					
				

			

		

		

			
				
最近的项目涉及到很多表单的制作，特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现，单(复)选框和它们后面的提示文字在不进行任何设置的情况下，是无法对齐的，而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle，也依然不能完美对齐。如下图所示：


于是上网查看了一些网站，发现这个问题是普遍存在的，如下图（FF3.5）：...

			
		

	





	

		

			

				
					
如何使用 get输入字符串数组_input表单如何制作多行文本输入框？一篇文章教你学会使用input标签...

				
			

			

				

					weixin_39800875的博客
				

				

					11-23
					
					266
					
				

			

		

		

			
				
本篇文章主要的为大家讲述了HTMLinput标签如何制作一个登陆界面的介绍，有文本框、密码框、单选框、多选框、提交和重置按钮的使用说明，完全的解释了HTML表单input标签的使用详情了。现在让我们来看看这篇文章吧一、首先我们来看看如何制作文本框：<form action="url地址" method=“get/post” name="表单名称">

<p>这是文本框&lt...

			
		

	





	

		

			

				
					
vue图片验证码

				
			

			

				

					weixin_58670730的博客
				

				

					02-08
					
					595
					
				

			

		

		

			
				
先看效果



1.验证码组件


<template>
  <div class="s-canvas">
    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight" @click="Refresh"></canvas>
  </div>
</template>
<script>
export default {
  name: 'SIden

			
		

	





	

		

			

				
					
el-form-item中输入框和按钮不同行的问题

					
最新发布

				
			

			

				

					natural_king的博客
				

				

					12-29
					
					917
					
				

			

		

		

			
				
使用elementUI做表单，制作登录功能，手机号下面，有验证码输入框，接着是旁边的发送验证码按钮，直接在el-form-item中写两个元素，会两行显示，又不想整个表单都是水平的。

			
		

	





	

		

			

				
					
input文本框、文字、按钮、图片 垂直居中对齐的解决办法 .

				
			

			

				

					06-07
				

			

		

		

			
				
实现input文本框、文字、按钮、图片垂直居中对齐有多种方法，下面为您介绍两种常用的方法：

方法一：使用flex布局

使用flex布局可以很方便地实现垂直居中对齐，如下所示：

```html
<div class="container">
  <input type="text" placeholder="请输入" />
  <button>按钮</button>
  <img src="图片地址" alt="图片" />
  <span>文本</span>
</div>
```

```css
.container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}
```

方法二：使用table-cell布局

使用table-cell布局也可以实现垂直居中对齐，如下所示：

```html
<div class="container">
  <div class="cell">
    <input type="text" placeholder="请输入" />
  </div>
  <div class="cell">
    <button>按钮</button>
  </div>
  <div class="cell">
    <img src="图片地址" alt="图片" />
  </div>
  <div class="cell">
    <span>文本</span>
  </div>
</div>
```

```css
.container {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.cell {
  display: table-cell;
  vertical-align: middle; /* 垂直居中对齐 */
}
```

以上两种方法均可以实现input文本框、文字、按钮、图片的垂直居中对齐，您可以根据实际需求选择使用。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值