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

xiaolan-bit

已于 2022-10-14 10:08:40 修改

阅读量1.3w

点赞数 2

文章标签： vue.js elementui 前端

于 2021-08-07 10:40:41 首次发布

本文链接：https://blog.csdn.net/qq_59716333/article/details/119480350

版权

常规的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

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue elementUI el-card中el-input的位置居中

常规的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>.
复制链接

扫一扫

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...

日常问题集锦

Aku_2020的博客

11-15

2108

【①】运行项目时出现的端口被占用问题：【②】JS中获取当前时间：【③】一些常用的校验规则：【④】vue 表格中数据默认全部选中：【⑤】vue 获取表格中选中行的数据：【⑥】vue 强制更新数据：【⑦】vue 想要el-input框内文字居中显示：【⑧】vue 清除表单内的内容或者清除表单验证：【⑨】vue 表格分页的两种格式：【⑩】vue 中防止按钮重复点击提交的方法：

参与评论您还未登录，请先登录后发表或查看评论

Vue中常用属性设置

Aku_2020的博客

01-06

1369

一、想要el-input框内文字居中显示。二、清除表单内的内容或者清除表单验证。

【Vue3】 el-table隐藏输入框；input输入内容居中；去掉el-input-number的上下箭头

alikami的博客

03-08

514

vue3 + elementplus中 el-table隐藏输入框；input输入内容居中；去掉el-input-number的上下箭头

设置input 内容居中显示

热门推荐

舒婷(Zoe)

08-06

12万+

text-align:center 水平居中显示 input.text{text-align:center;padding:10px 20px;width:300px;}

解决vue中el-tab-pane切换的问题

10-15

主要介绍了解决vue中el-tab-pane切换的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

CSS常见的让元素水平居中显示的方法

01-19

用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。 1.使用自动外边距实现居中 CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto即可。在实际使用中，我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就是，必须为

div盒子水平垂直居中以及表格的居中的方法

NanChen的博客

11-17

2666

#admin { position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -200px; width: 400px; height: 300px; background: #fff; } 1.必需知道该div的宽度和高度， 2.然后设置位置为绝对位置， 3.距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%， 4.最后将该div分别左移.

HTML块级元素水平居中

鸣鼓ming的博客

07-25

2736

1.元素未对齐的情况 <div> <el-card class="box-card" style="width: 1500px;"> <div v-for="o in 4" :key="o" class="text item"> {{'列表内容 ' + o }} </div> </el-card> <el-card class="box-card" style="width:

使input文本框中文字居中

dames的博客

05-02

1万+

通过text-align:center实现： <input style="width: 60px;text-align:center"> 效果：

elementUi vue el-radio 监听选中变化的实例代码

01-19

elementUi vue el-radio 监听选中变化的实例代码如下所述： //change是radio-group标签的事件男女 export default { name: 'Radio',

vue elementui el-form rules动态验证的实例代码详解

10-16

在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下

Vue ElementUI el-select 图片选择效果

02-24

基于 Vue2.x，对 ElementUI el-select 做图片选择效果。项目说明可参见：https://blog.csdn.net/sinat_31213021/article/details/129195721

vue快速入门（四十六）Router的安装与使用

不起眼小菜菜的博客

04-26

654

步骤很详细，直接上教程……

Vue项目中异步组件的引入使用

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交