css3实现div中的input表单垂直居中 display：flex

最新推荐文章于 2022-04-02 14:50:17 发布
最新推荐文章于 2022-04-02 14:50:17 发布
阅读量9.8k 收藏 1
点赞数 2
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/DeBruyne/article/details/72677367
本文介绍了一个具体的HTML和CSS实现方案，用于展示如何设计一个输入姓名的字段，并确保其具备良好的视觉效果及用户体验。通过使用Flex布局，实现了输入框的居中显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<div class="entrust_name entrust_pub">
<span>姓名</span>
<input id="entrust_name" type="text" placeholder="请填入姓名">

</div>

.entrust_pub{
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}

DeBruyne
关注
vertical-align 表单文字垂直居中
weixin_34161064的博客
03-18 1252
最近的项目涉及到很多表单的制作，特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现，单(复)选框和它们后面的提示文字在不进行任何设置的情况下，是无法对齐的，而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle，也依然不能完美对齐。如下图所示： 于是上网查看了一些网站，发现这个问题是普遍存在的，如下图（FF3.5）：...
【基础篇】CSS3核心技术：选择器、盒模型与Flex布局详解
资深全栈架构师，乐于在 优快云 分享技术见解，与大家携手共进，共攀技术巅峰！
05-13 1050
🔥 阅前必看：本文是《前端开发完全指南》系列的第二篇，包含28个实用代码示例、15张核心概念图解、4个完整实战项目。全文系统讲解CSS3核心机制，建议配合Chrome开发者工具实践！ 1.2 核心模块矩阵 模块 核心特性 兼容性 解决的核心问题 选择器 属性选择器、伪类 IE9+ 精准DOM操作 盒模型 box-sizing IE8+ 布局尺寸计算 Flex布局 弹性容器/项目 IE10+ 一维自适应布局 过渡动画 transition/animation IE10+ 交互体验
纯CSS实现垂直居中的几种方法
weixin_34166472的博客
04-23 1336
垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。 方法1：table-cell html结构： <div class="box box1"> <span>垂直居中</span> </div> ...
input文本框文字垂直居中
lanfeng330的专栏
11-02 8514
表单默认input文本框文字并不垂直居中而在顶端，如何调整呢，可以通过css来调整垂直高度，代码演示如下 input type="text" style="font-size:12px;line-height:45px; height:50px;" value="www.itstudy.cn"/> height: 设置input样式的高度，line-height:设置input里文
div中input垂直居中的方法
q850593913的博客
06-03 9269
div中input垂直居中的方法 1. absolute+transfrom <div> <input type="text"/> </div> <style> div{ position: relative; height: 44px; background-color: #fe3c35; } input{ position: absolute; top: 50%; transform: translateY(-50%
div中的input居中_CSS笔记—居中布局
weixin_39972768的博客
11-29 2136
我们在网页布局的时候，经常会碰到需要居中的情况，平时大家所看到的居中效果主要分为三大类：水平居中、垂直居中和水平垂直居中。一、水平居中1.元素宽高未知当元素的宽高都未知的时候，可以利用以下两种方法将元素水平居中：①CSS3 transform：.②flexbox：.2.居中元素为内联元素常见的内联元素有：span, a, img, input, label 等等。您可以在块级父元素内水平居中内联元...
jsf老版本css不能使用flex，怎么垂直居中
最新发布
07-15
我们正在讨论的是在JSF老版本中使用CSS Flexbox实现垂直居中。注意：JSF老版本可能指的是JSF 2.2或更早版本，但CSS Flexbox的使用与JSF版本无关，主要取决于浏览器支持。因此，在JSF中实现Flexbox垂直居中，实际上是...
如何在 Element UI 中实现表单标签和输入框的垂直居中布局？
06-19
最终，我们将提供两种情况的解决方案：情况一：整个表单项在父容器中垂直居中（使用父容器flex布局）。情况二：表单项内部标签和输入框的垂直居中（默认已支持，自定义高度时需要调整标签行高或使用flex布局）。根据...
HTML中设置表单内容垂直居中
11-01
在HTML中，想要让表单内容在页面上垂直居中，你可以使用CSS（层叠样式表）来实现。这里提供一种常见的方法，即使用Flexbox布局。首先，确保你的表单容器有`display: flex;`属性，并且设置了`align-items: center;`，...
DIV+CSS简单登录界面模板
06-06
2. **布局模式**：使用`display`属性，可以设置`Div`元素为`block`（块级元素）、`inline-block`或`flex`（弹性盒模型），以实现流式布局、网格布局或者响应式布局。 3. **响应式设计**：通过`media queries`，我们...
input中文字的垂直居中
大白兔
07-20 3890
我们一般设置文字垂直居中用line-height属性，但是在Chrome浏览器中使用line-height时input中的文字还是没有居中，针对这一问题，解决办法如下：input{ width: 100%; height: 0.4rem; padding: 0.1rem; line-height: normal; box-sizing: border-box;
文字居中input文字垂直居中
qq_39192629的博客
04-23 5251
做移动端都会遇到文字垂直居中的问题，特别是有些手机真的很难调整，然后就是必须要文字居中，那就说说几种文字垂直居中的问题吧。 普通的元素例如div 1.这种居中，利用padding上下值来居中。 2.知道高度用line-height来，但是这个一般在安卓手机都有点不是很彻底的居中，偏下一点点。 3.利用弹性盒子display：flex；align-items: center;也能垂直居中； 如果是利...
CSS垂直居中div中的input元素
yh_zeng2的博客
12-02 7362
方法一：设置div一定的高度和相同的行高 .wrapInputDiv{ height: 40px; line-height: 40px; }
input文字垂直居中_CSS的带文字居中分析
weixin_39968266的博客
11-29 1279
CSS居中的方法有特别多，这里只介绍最基本的方法。CSS中分块级元素和内联元素，但是块级元素或者内联元素都可以设置display，最常用的三种display——inline、block、inline-block。本博客介绍了下面各种情况如何居中：1、单独设置block元素如何居中；2、单独设置inline元素如何居中；3、单独设置inline-block元素如何居中；4、父元素和子元素组合...
DIV实现input垂直居中
iteye_4972的博客
03-16 1464
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;
input内的文件水平剧中和垂直居中
petercnmei的专栏
12-15 1万+
input内的文件水平剧中和垂直居中  转载▼ 水平：input type="text" value="文字" style="text-align:center">   垂直：vertical-align:middle;
input文本框、文字、按钮、图片 垂直居中对齐的解决办法
热门推荐
familyGo的专栏
07-27 2万+
1.input 文本框 文字垂直居中对齐 表单默认input文本框文字并不垂直居中而在顶端，如何调整呢，可以通过css来调整垂直高度，代码演示如下 input type="text" style="font-size:12px;line-heigh
div中有两个input控件，怎样让这两个控件在div居中显示
zi_ran_meng的博客
04-02 1422
把两个input 放在一个div里面 给一个 text-align: center;属性 就可以居中显示了
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值