vue elementUI el-card中el-input的位置居中

已于 2022-10-14 10:08:40 修改
阅读量1.4w 收藏 3
点赞数 3
文章标签： vue.js elementui 前端
于 2021-08-07 10:40:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_59716333/article/details/119480350
版权
本文介绍了如何通过在el-card中嵌套el-row，解决el-input置于底层的问题，实现输入框在卡片内的适中布局，提升UI美观度。

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

常规的el-card中放入el-input

<el-card>
        <el-col :span="10">
            <el-input ></el-input>
        </el-col>
    </el-card>

会导致输入框置于card的最底层，并不美观

 此时我们可以嵌套一个el-row，效果就会完全不同

<el-card>
      <el-row>
        <el-col :span="10">
          <el-input></el-input> </el-col
      ></el-row>
    </el-card>

此时的input框就会位于卡片的中间

xiaolan-bit
关注
日常问题集锦
Aku_2020的博客
11-15 2763
【①】运行项目时出现的端口被占用问题： 【②】JS中获取当前时间： 【③】一些常用的校验规则： 【④】vue 表格中数据默认全部选中： 【⑤】vue 获取表格中选中行的数据： 【⑥】vue 强制更新数据： 【⑦】vue 想要el-input框内文字居中显示： 【⑧】vue 清除表单内的内容或者清除表单验证： 【⑨】vue 表格分页的两种格式： 【⑩】vue 中防止按钮重复点击提交的方法：
Element-UI自学实践（二）
weixin_40017062的博客
08-24 1232
Element-UI自学实践
vue组件实现文字居中对齐的方法
08-29
主要为大家详细介绍了vue组件实现文字居中对齐的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Element Plus: el-card的内容滚动问题
最新发布
啃编程
02-26 282
由于el-card的body div默认没有设置的height，因此它里面的内容高度超出后不能滚动。
el-input或者el-input-number文字居中
qxyywy的专栏
08-21 1284
el-input或者el-input-number文字居中，主要处理vue样式穿透的问题。
解决el-input的输入文字居中
lookinglove1的博客
06-05 2594
"/>
让文字与input居中对齐
deform0032的博客
12-27 796
最近碰到了文字无法与input居中对齐的问题，即使设置父容器的style="vertical-align:middle"也不行，后来查了下才知道原来设置input的style="vertical-align:middle"就行了:) 截图如下： 转载于:https://www.cnblogs.com/vagerent/archive/2007/12/27/1017021....
【Vue3】 el-table隐藏输入框；input输入内容居中；去掉el-input-number的上下箭头
alikami的博客
03-08 1837
vue3 + elementplus中 el-table隐藏输入框；input输入内容居中；去掉el-input-number的上下箭头
vue el-card居中
11-24
要使el-card居中，可以使用flex布局。具体方法如下： ... <div class="card-container"> ...在el-card中，我们使用了一个el-row来包含el-input，并将其设置为居中对齐。这样，整个el-card就会居中显示了。
el-input输入框文字居中
08-23
- *1* *3* [vue elementUI el-card中el-input的位置居中](https://blog.csdn.net/qq_59716333/article/details/119480350)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...
el-input输入文字居中
07-27
- *2* [vue elementUI el-card中el-input的位置居中](https://blog.csdn.net/qq_59716333/article/details/119480350)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip...
Firefox下input button内文字不能垂直居中的解决方法
09-25
在Firefox下input type=”button”的文字是不好居中的，原因在于Firefox自己弄了个私有属性，解决方法很简单，遇到类似问题的朋友可以学习下，希望可以帮助到大家
Vue 项目实战三 权限管理和用户列表 递归 三级for循环
m0_55170432的博客
05-26 949
!!树状结构 递归 调用获取ID!!! 重点！ console.log(val)外界传递进来的参数,就是当前角色自带的权限 现在就是要从val里面拿出来我们所有ID组成的数组 因为这个数据的格式,是每个对象都有children,只要到了一个对象没有children,那么证明这个层级就结束了,就可以当作递归的结束条件 // 设置一个递归函数,通过递归的形式，获取角色下所有三级权限的id，并保持在defKeys中 getLeafKeys(node, arr) { if (!n
设置input 内容居中显示
热门推荐
舒婷(Zoe)
08-06 13万+
text-align:center  水平居中显示 input.text{text-align:center;padding:10px 20px;width:300px;}
Element-UI控件上下居中，比如el-input上下居中显示
楊帥
04-16 3万+
<div class="home_input"> <el-input placeholder="请输入内容" v-model="search_text"> <el-button slot="append" icon="el-icon-search"></el-button> </el-input> </div&g...
el-input placeholder 无法垂直居中
weixin_41706307的博客
12-21 1242
el-input placeholder无法垂直居中，el-input，placeholder，垂直居中
vue + elementui 表单居中对齐，验证码倒计时
pin-csdn的博客
07-14 8058
1、表单居中对齐： <fieldset> <legend >个人信息</legend> <!-- 姓名 --> <el-form-item label="姓名：" prop="apply_person_name" size = 'small' > <el-input v-model="form.apply_person_name" placeholder="请输入
vue+element组件table表格表头内容居中样式
爬楼梯的前端小白的博客
02-25 1063
vue+element组件table表格表头内容居中
elementui中input限制为仅输入数字时，去除右侧按钮，以及输入文字时光标仍然居中
EstherNi的博客
01-25 828
elementui中input限制为仅输入数字时，去除右侧按钮，以及输入文字时光标仍然居中
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值