css垂直居中怎么设置?文字上下居中和图片垂直居中

  css 居中分css垂直居中和css水平居中,水平居中平时比较常用,这里我们主要讲css上下居中的问题。垂直居中又分为css文字上下居中和css图片垂直居中,下面我们就分别来介绍一下。

css文字上下居中:一、单行内容的居中。只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 height,并使两值相等,再加上 over-flow: hidden 就可以了。css代码为{height: 4em;line-height: 4em;overflow: hidden;}

  优点:1. 同时支持块级和内联极元素;2. 支持所有浏览器   缺点:1. 只能显示一行;2. IE中不支持<img>等的居中   要注意的是:1. 使用相对高度定义你的 height 和 line-height;2. 不想毁了你的布局的话,overflow: hidden 一定要

  二、多行内容居中,且容器高度可变。也很简单,给出一致的 padding-bottom 和 padding-top 就行

  优点:1. 同时支持块级和内联极元素;2. 支持非文本内容;3. 支持所有浏览器   缺点:容器不能固定高度

css图片垂直居中,我们只需要在CSS样式中加入如下CSS代码:img{ vertical-align:middle;}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏.Net移动开发

VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——SliderView控件的使用方式

获得和设置标签视图集合,打开集合编辑器,并点击“添加”,分别填写ResourceID属性(菜单项图片名称),Text(菜单项文本),Value(内部值,不在界面...

921
来自专栏柠檬先生

jquery 层级选择器

关于层级选择器。 $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素。 parent :...

18110
来自专栏十月梦想

HTML表格

            4.cellspacing:外边距(单元格和单元格之间的距离)

2262
来自专栏前端小叙

vue获取DOM元素并设置属性

这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二...

38312
来自专栏V站

CSS3实现鼠标移动图片上图片变大(缓慢变大,放大过程有动画过渡,过渡时间可自定义)

CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果...

2134
来自专栏前端小叙

多行或者单行文本超出两行显示点点点,如果保证内容始终垂直居中?

我现在的需求是这样的,我目前实现了一个div框,显示文字,超出两行显示...,如果单行要保证垂直居中,我如果给容器使用display:flex;align-it...

1193
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:实现手机上常见的ListMenuView

打开集合编辑器,并点击“添加”,ID属性(用于标识菜单组),Items属性(菜单项集合),Title属性(菜单组文本),Value属性(菜单组值),如图1、图2

894
来自专栏练小习的专栏

分享一个跨浏览器固定定位的方法。

我发现原来做前端真的是需要创意的。前几天看到别人用boeder代替边距做hover效果,这次又看到用这个办法做固定定位的,解开了我一个心结。 其实很简单,就是我...

20210
来自专栏河湾欢儿的专栏

表格

表格标签: table 表格 thead 表格头 tbody 表格主体 tr 表格行 th 元素定义表头 td 元素定义表格单元

731
来自专栏.Net移动开发

.NET(C#、VB)移动开发——Smobiler平台控件介绍:TextTabBar控件

获得和设置标签栏单元集合,打开集合编辑器,并点击“添加”,分别填写Text(菜单项文本),Value(内部值,不在界面上显示),如图 7、图 8;

1222

扫码关注云+社区