关于DIV内文字垂直居中的写法

时间:2022-06-22 23:56:07

最近在写UI,或多或少用到了CSS,在这记录一下,今天用到的DIV内文字垂直居中的写法,

因为所做的项目都是基于WebKit内核浏览器演示的,所以我们今天采用的是-webkit-box的写法:

display: -webkit-box;
/* 水平居中*/
-webkit-box-align: center;
/* 垂直居中 */
-webkit-box-pack: center;
/*flex需要写上,不写没作用*/
-webkit-box-flex: 1;

上面这种写法适合高度不固定的情况。

如果是css2中呢,普遍的写法是,适用于高度固定的情况:

/*水平居中*/
text-align:center
/*我们假设div的高度是50,设置line-height和height相同就可以实现垂直居中*/
line-height:50px;
height:50px;

关于DIV内文字垂直居中的写法的更多相关文章

  1. CSS——div垂直居中及div内文字垂直居中

    最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...

  2. CSS div内文字显示两行,超出部分省略号显示

    1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...

  3. css实现行内文字垂直居中

    之前本人一直使用浮动.相对定位.绝对定位和display:table等css的方法进行定位.网上得知flex可实现弹性布局,符合未来发展趋势,随尝试. 1:让盒子行内文字垂直居中,解决思路是讲文字的行 ...

  4. CSS——div内文字的溢出部分用省略号显示

    使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...

  5. div 内 图片 垂直居中

    vertical-align属性适用于 line-block: <div class="title"> <img src="img_p1_title.p ...

  6. &lbrack;HTML&rsqb;DIV&plus;CSS 文字垂直居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  7. div&plus;css文字垂直居中 解决左侧头像右侧姓名,姓名多换行后相对于头像仍居中显示

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  8. 00002、div的文字垂直居中与背景的渐变

    1.div可以放多行的文字,当显示文字较少时,文字可垂直居中 text-align: center; display: table-cell; vertical-align: middle; text ...

  9. html框内文字垂直居中的方法

    由于无法知道框内文字的高度,很难确定垂直空间的位置.vertical-align:middle仅对td元素有效,无论单行和多行均可实现垂直居中.

随机推荐

  1. 关于安装Apache之后,解析PHP的配置

    需要配置四个地方 LoadModule php5_module modules/libphp5.soServerName localhost:80DirectoryIndex index.phpAdd ...

  2. hadoop面试时的一些问题解答

    一.         linux部分 请阐述swap分区作用,您认为hadoop集群中的linux是否必须有swap分区? 答:在Linux中,如果一个进程的内存空间不足,那么,它会将内存中的部分数据 ...

  3. Spark服务启动的一些总结

    1.我理解常用的Spark部署方式有三种 1).本地服务,就是所谓的local,在IDE上本地跑程序,用于调试 2).Standalone,使用自己的master/worker进行服务的调度.  脱离 ...

  4. Android构建boot&period;img&lpar;二&rpar;&colon;kernel的拷贝与打包

    上文已经对boot.img其中组成部分之一ramdisk.img做了分析,boot.img另外一个重要的组成部分就是kernel了, 这里所说的kernel,可以只理解为位于out/target/pr ...

  5. 利用jquery的imgAreaSelect插件实现图片裁剪示例

    http://www.cnblogs.com/mizzle/archive/2011/10/13/2209891.html 将用户上传的图片进行裁剪再保存是现在web2.0应用中常常处理的工作,现在借 ...

  6. flask tutorial &equals;&gt&semi; make a blog &colon;&rpar; flask 搭建博客系统从零开始!

    please follow the tutorial from the official site :) http://flask.pocoo.org/docs/ You could download ...

  7. EmpyoyeeManger&lowbar;1&period;0

    整体结构 首先创建一个名为employee的数据库 create database employee; 然后在该数据库下建一张表 CREATE TABLE t_emp( id BIGINT PRIMA ...

  8. 用ECMAScript4 &lpar; ActionScript3&rpar; 实现Unity的热更新 -- 使用原型链和EventTrigger

    原型链是JS的必备,作为ECMAScript4,原型链也是支持的. 特别说明,ActionScript3是支持完整的面向对象继承支持的,原型链只在某些非常特殊的情况下使用. 本文旨在介绍如何使用原型链 ...

  9. js中let和var的区别 不懂得加QQ 2270312758

    js中使用let定义变量的时候,是需要使用严格模式的,我看到网上有的博客说:如果在不使用严格模式的情况下,使用let会报错,但是在实验的过程中,我直接定义了let变量而且也没有使用严格模式,并没有报任 ...

  10. Dell Venue 8 Pro启动盘UEFI模式32位启动,备份系统

    进入微PE工具箱官方下载页面:http://www.wepe.com.cn/download.html,选择Win8PE 32位 V1.2版下载. 或者直接百度盘下载:https://pan.baid ...