转自:https://blog.csdn.net/weirenkuan/article/details/51177695

使用display:table-cell，span中内容无论多少，都可以垂直居中

<div style="display:table-cell;height:100px;font-size:12px;font-height:14px;vertical-align:middle;text-align:center">

<span>

ceshiceshi

</span>

</div>

另外，有设置line-height等于外面div的height方法，但是无法正常显示太长的内容

另:设置div在div中的位置:https://blog.csdn.net/buyaoxx/article/details/77850575

设置span在div中垂直居中的更多相关文章

  1. 设置文字在div中垂直居中，使用line-height

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-19) line-height 行间距 详细使用方法:http://www.w3school.com.cn/css/pr ...

  2. “display:block-inline形式的Span或Div中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法

    最近在使用3个span(或div)制作带圆角边框的按钮时,按照常识,把span的display设置成inline-block,这样就可以设置span的width和height了,很爽的~ 可是当我在中 ...

  3. 未知行数的文字在div中垂直居中

    今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...

  4. p标签在div中垂直居中，并且div高度随着p标签文字内容的变化而变化

    1.div设置flex布局 div{ display: flex; align-items: center; } 2.div不要设置height,设置min-height

  5. 设置 img 在 div 中水平居中和垂直居中

    Ø  前言 写 html + css 时,img 标签的垂直与水平居中,应该是很常见的设计.实现的方式很多,但是容易遗忘,下面分别整理了几种实现方式. 1.   css 代码 <style ty ...

  6. CSS-布局【1】-图片在div中垂直居中

    方法一:通过增加100%高度行内块居中对齐 <!DOCTYPE html> <html> <head> <meta name="viewport&q ...

  7. 不定宽高的文字在div中垂直居中

    本人在面试的时候被问到:如何使一段不定宽高的文字垂直居中呢? 现在来总结一下: 在body中写入结构 <div id="main">    <div id=&qu ...

  8. 尺寸不固定的图片在div中垂直居中并完全显示

    前几天做一个项目,需要批量上传图片,图片外侧div尺寸固定:由于图片是用户输入的,所以大小存在不确定性,产品需求是无论图片尺寸多大,都要垂直居中完全显示 废话不多说,直接上代码 html <ul ...

  9. 二十：让行内元素在div中垂直居中

    (1)使用display:table-cell配合vertical-align:center(淘宝也是这样用的) <div class="method4"> <s ...

随机推荐

  1. 学 Win32 汇编[34] - 宏汇编(1)

    从接触 C 语言时, 我就不大喜欢宏; 但为了看懂别人的代码也不得不去了解. 宏可定义在源程序的任意位置, 但一般放在 .data 前面.有些简单的宏可以用 equ.textequ 或 = 来代替, ...

  2. 转：无监督特征学习——Unsupervised feature learning and deep learning

    http://blog.csdn.net/abcjennifer/article/details/7804962 无监督学习近年来很热,先后应用于computer vision, audio clas ...

  3. Sqlite向MySql导入数据

    想把手上的Sqlite数据库导入到MySql,想来应该很简单,结果发现非常麻烦. 1.工具直接导入.试着找了几个软件,都不行.网上有人开发的,但是要收费,也不能用. 2.用各自支持的方式,中转.我用的 ...

  4. android学习四（Activity的生命周期）

    要学好活动(Activity).就必需要了解android中Activity的声明周期.灵活的使用生命周期.能够开发出更好的程序,在android中是使用任务来管理活动的,一个任务就是一组存放在栈里的 ...

  5. 优化MySQL开启skip-name-resolve参数时显示“ignored in --skip-name-resolve mode.”Warning解决方法

    转自:http://blog.csdn.net/yiluoak_47/article/details/53381282 参数用途: skip-name-resolve #禁止MySQL对外部连接进行D ...

  6. 基于redis分布式缓存实现（新浪微博案例）转

    第一:Redis 是什么? Redis是基于内存.可持久化的日志型.Key-Value数据库 高性能存储系统,并提供多种语言的API. 第二:出现背景 数据结构(Data Structure)需求越来 ...

  7. jstl函数的使用

    1.fn:contains()和fn:containsIgnoreCase() fn:contains()函数用于确定一个字符串是否包含指定的子串. fn:containsIgnoreCase()函数 ...

  8. 第八周（1） Word信函与邮件

    第八周(1) Word信函与邮件 教学时间 2013-4-15 教学课时 2 教案序号 13 教学目标 1.学会使用word制作信封和标签2.理解邮件合并的概念和功能3.学会利用邮件合并批量制作文档 ...

  9. windows服务管理TopShelf

    http://docs.topshelf-project.com/en/latest/index.html 我曾经把名称错为Topself

  10. Java Netty (2)

    通过一个实例来说明Netty的使用.用1个服务器连接5个客户端线程,客户端连接上服务器以后就向服务器发送消息,服务器接收到消息后向客户端返回消息,客户端接收到消息以后,等待随机的时间,再向服务端发送消 ...