水平居中

定宽度+margin:top auto可以让一个块级别元素在外层居中

例如这样:

效果:

可以看到这个div已经居中了

但是我们里边的表格还没有居中,我们也可以给表格这样来一套,让他相对它的父级居中

我们看到里边的表格也已经居中了,但是表格内容并没有居中,因为输入框的长度不等于表格的长度哇

想让内容居中很简单,直接加一个text-align:center让内容居中就好了

效果如下:

其实也可以这样在表格的宽度设置成和div一样宽,然后设置一个内容居中就好了

效果如下:因为宽度完全一样,所以表格的颜色被覆盖看不到了

文字垂直居中

使用line-height设置成高度和外面div一样即可.tabstyle {

border-bottom: 1px solid #eee;

padding: 0px 20px;

/*固定高度好调整东西*/

height: 38px;

/*让文字垂直居中*/

line-height: 38px;

}

登录后的logo文字垂直居中也是

设置一个line-height和外层div一样高自然就垂直居中了,很nice

欢迎加群讨论技术,群号:677373950

css 输入框中文字水平居中,css水平居中,文字垂直居中相关推荐

  1. 文字在阴影层上面 css,CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3)...

    CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3) 是否可以使用CSS3在一个p-tag上应用两个文字阴影? 我想用1像素边框创建一个非常浅 ...

  2. css规则中区块block,css常用属性总结:背景background下篇

    前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...

  3. 在html中div水平垂直css,html中div使用CSS实现水平/垂直居中的多种方式

    CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. git 查看源码 配合在线预览,效果更佳 以下例子中,涉及到的CSS属性值. .parent-frame ...

  4. vue实现动态css,Vue中如何动态绑定CSS

    学习VUE2.0,想尝试做个在表格中,选中不同的列,将该列设置一个CSS.但是不成功.请赐教~~非常感谢! 先上代码 html代码 操作IDNameEmail {{list.id}}{{list.na ...

  5. 网页css样式中英对照,css中文样式(含中英文对照表).doc

    css中文样式(含中英文对照表) CSS学习网站: /css/css_reference.asp / /thread-265-1-1.html 1.[类型]主要针对网页中的文本 [背景]是在网页的元素 ...

  6. css规则中区块block,CSS的命名方式:BEM(区块、元素、修饰符)

    原标题:CSS的命名方式:BEM(区块.元素.修饰符) 本资源由 伯乐在线- 凝枫整理,您也想贡献一份力量?欢迎加入我们 » 重要概念 "Block"区块 区块的定义是:一个逻辑和 ...

  7. Css标题中图片居中,CSS居中的标题图片

    我有一个标题图片在屏幕上重复出现,因此无论屏幕分辨率如何,标题始终都会伸展100%,我已将图片放在包装div中. 在DIV的顶部,我也希望放置'logo',使它始终居中在屏幕的顶部.CSS居中的标题图 ...

  8. css在中元素添加元素,css - 在伪元素内容中添加换行符到:: after或:: before

    css - 在伪元素内容中添加换行符到:: after或:: before 我无法访问页面的HTML或PHP,只能通过CSS进行编辑. 我一直在网站上进行修改并通过content或::before伪元 ...

  9. css规则中区块block,CSS 定位详解

    CSS 有两个最重要的基本属性,前端开发必须掌握:display 和 position position 属性的作用 position属性用来指定一个元素在网页上的位置,一共有5种定位方式,即posi ...

最新文章

  1. java调用PageOffice生成word
  2. 单细胞转录组单飞第二期开课啦!!
  3. 多大、谷歌大脑获ICML 2021杰出论文奖,田渊栋、陆昱成获荣誉提名!
  4. 从源码带你看懂functools的partial方法
  5. linux之循环执行任务
  6. VC+MO2.0连接ArcSDE并且读出SDE中的空间数据(三)
  7. 我的2021年度总结
  8. AspNet2.0页面生命周期
  9. TEDxChengdu 演讲(瞬雨)
  10. Airflow 中文文档:插件
  11. STL源码剖析-map
  12. AWS Toolkit for Eclipse环境配置
  13. 数据结构实验一:顺序表的实现及应用
  14. 【ubuntu20】虚拟机下ubuntu联网
  15. Unity基础案例讲解:创建小型太空射击游戏(二)
  16. logstash grok mysql_logstash -grok插件语法介绍
  17. 有一个已经排好序的数组,要求输入一个数后,按原来排序规律将它插入数组中。
  18. 程序员如何巧用Excel提高工作效率
  19. 【EXCEL技巧】制作一个信息查询表(仅可查看自己)
  20. Kubernetes Scheduler源码分析--启动过程与多队列缓存(续)

热门文章

  1. 用笔记本电脑怎样录音?
  2. SolarWinds 2002
  3. android qq登陆界面代码下载,【Android Demo】QQ登陆界面(一)
  4. Java数据类型—BigDecimal
  5. 网站 服务器 和 空间大小,网站空间多大合适
  6. Java web产品开发经验分享
  7. 【智能制造】汽车智能制造技术应用及智能工厂案例
  8. Sitara™处理器的产品开发路线图
  9. ( 转)三星有多大?来见识一下三星的另一面
  10. Vocus将在澳大利亚部署XGS-PON解决方案