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

最新推荐文章于 2022-10-11 16:55:23 发布
最新推荐文章于 2022-10-11 16:55:23 发布
阅读量9.7k 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/debruyne/article/details/72677367
版权
<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
关注
文字居中input文字垂直居中
qq_39192629的博客
04-23 5118
做移动端都会遇到文字垂直居中的问题，特别是有些手机真的很难调整，然后就是必须要文字居中，那就说说几种文字垂直居中的问题吧。 普通的元素例如div 1.这种居中，利用padding上下值来居中。 2.知道高度用line-height来，但是这个一般在安卓手机都有点不是很彻底的居中，偏下一点点。 3.利用弹性盒子display：flex；align-items: center;也能垂直居中； 如果是利...
css label 居中布局_详解 CSS 居中布局技巧
weixin_39920629的博客
12-22 1292
水平居中元素：通用方法，元素的宽高未知方式一：CSS3 transform.parent {position: relative;}.child {position: absolute;left: 50%;transform: translateX(-50%);}方式二：Flex 布局.parent {display: flex;justify-content: center;}适用于子元素为浮动...
纯CSS实现垂直居中的几种方法
weixin_34166472的博客
04-23 1294
垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。 方法1：table-cell html结构： <div class="box box1"> <span>垂直居中</span> </div> ...
input文本框文字垂直居中
lanfeng330的专栏
11-02 8413
表单默认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 9081
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 1992
我们在网页布局的时候，经常会碰到需要居中的情况，平时大家所看到的居中效果主要分为三大类：水平居中、垂直居中和水平垂直居中。一、水平居中1.元素宽高未知当元素的宽高都未知的时候，可以利用以下两种方法将元素水平居中：①CSS3 transform：.②flexbox：.2.居中元素为内联元素常见的内联元素有：span, a, img, input, label 等等。您可以在块级父元素内水平居中内联元...
DIV+CSS简单登录界面模板
06-06
2. **布局模式**：使用`display`属性，可以设置`Div`元素为`block`（块级元素）、`inline-block`或`flex`（弹性盒模型），以实现流式布局、网格布局或者响应式布局。 3. **响应式设计**：通过`media queries`，我们...
flex布局，弹性盒子，css使用及理解
qq_54598736的博客
10-11 1137
flex布局，弹性盒子，css使用及理解
创建一个自适应居中的登录框，我们可以使用HTML5和CSS3
BLOG域名:programb.blog.csdn.net
07-03 1585
登录框.login-box则是一个固定宽度的容器，具有一些内边距、背景色和阴影效果。这个例子是静态的，如果你想让登录框在窗口大小变化时保持居中，只需保持上述的Flexbox布局即可。如果你想让登录框具有更多的响应式特性，比如根据屏幕大小调整宽度，你可以在.login-box的CSS中使用max-width和width属性，并添加媒体查询来适应不同的屏幕尺寸。创建一个自适应居中的登录框，我们可以使用HTML5和CSS3。以下是一个简单的示例，展示了如何创建一个响应式登录框，该框会在页面中垂直和水平居中。
HTML+CSS+盒模型+flex布局+H5和CSS3新特性
m0_62351434的博客
01-12 517
目录HTML&C一、盒模型二.BFC三、清除浮动四、position定位的属性方法1. position: static;**2. position: relative;****3. position: absolute;****4. position: fixed;****5. inherit****6. sticky (黏性定位,吸顶效果)**五 、盒子水平垂直居中六、两栏布局、三栏（圣杯、双飞翼）作用：圣杯布局：优缺点：双飞翼布局：优缺点：圣杯与双飞翼的区别七、Flex 布局八、行内元素.块级
input中文字的垂直居中
大白兔
07-20 3822
我们一般设置文字垂直居中用line-height属性，但是在Chrome浏览器中使用line-height时input中的文字还是没有居中，针对这一问题，解决办法如下：input{ width: 100%; height: 0.4rem; padding: 0.1rem; line-height: normal; box-sizing: border-box;
CSS垂直居中div中的input元素
yh_zeng2的博客
12-02 7309
方法一：设置div一定的高度和相同的行高 .wrapInputDiv{ height: 40px; line-height: 40px; }
input文字垂直居中_CSS的带文字居中分析
weixin_39968266的博客
11-29 1178
CSS居中的方法有特别多，这里只介绍最基本的方法。CSS中分块级元素和内联元素，但是块级元素或者内联元素都可以设置display，最常用的三种display——inline、block、inline-block。本博客介绍了下面各种情况如何居中：1、单独设置block元素如何居中；2、单独设置inline元素如何居中；3、单独设置inline-block元素如何居中；4、父元素和子元素组合...
DIV实现input垂直居中
iteye_4972的博客
03-16 1345
&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;
vertical-align 表单文字垂直居中
weixin_34161064的博客
03-18 1166
最近的项目涉及到很多表单的制作，特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现，单(复)选框和它们后面的提示文字在不进行任何设置的情况下，是无法对齐的，而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle，也依然不能完美对齐。如下图所示： 于是上网查看了一些网站，发现这个问题是普遍存在的，如下图（FF3.5）：...
input内的文件水平剧中和垂直居中
热门推荐
petercnmei的专栏
12-15 1万+
input内的文件水平剧中和垂直居中  转载▼ 水平：input type="text" value="文字" style="text-align:center">   垂直：vertical-align:middle;
div中有两个input控件，怎样让这两个控件在div居中显示
zi_ran_meng的博客
04-02 1305
把两个input 放在一个div里面 给一个 text-align: center;属性 就可以居中显示了
CSS之垂直对齐
qq670471201的博客
11-19 391
CSS之垂直对齐 vertical-align: baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。 bottom 把元素的底端与行中最低的元素...
如何把表单居中且每一行对齐
最新发布
03-20
您可以使用CSS的flexbox布局来实现表单居中且每一行对齐。具体实现方法如下： 1. 在表单的父元素上设置display: flex;和flex-direction: column;，使其成为一个垂直方向的flex容器。 2. 在表单的父元素上设置align-items: center;，使其子元素在交叉轴上居中对齐。 3. 在表单的每一行元素上设置display: flex;和justify-content: space-between;，使其成为一个水平方向的flex容器，并且每个元素在主轴上均匀分布。 示例代码如下： HTML: ``` <div class="form-container"> <div class="form-row"> <label for="name">姓名：</label> <input type="text" id="name"> </div> <div class="form-row"> <label for="email">邮箱：</label> <input type="email" id="email"> </div> <div class="form-row"> <label for="phone">电话：</label> <input type="tel" id="phone"> </div> </div> ``` CSS: ``` .form-container { display: flex; flex-direction: column; align-items: center; } .form-row { display: flex; justify-content: space-between; width: 80%; margin-bottom: 10px; } label { width: 30%; text-align: right; margin-right: 10px; } input { flex: 1; } ``` 这样就可以实现表单居中且每一行对齐的效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值