转自: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. iOS开发-Bug锦囊

    duplicate symbols for architecture armv7 今天修改了自己项目的部分代码,发现XCode编译的时候报错:duplicate symbols for archite ...

  2. mysql分布式数据库中间件对比

    目前数据库中间件有很多,基本这些中间件在下都有了解和使用,各种中间件优缺点及使用场景也都有些心的.所以总结一个关于中间件比较的系列,希望可以对大家有帮助. 1. 什么是中间件 传统的架构模式就是 应用 ...

  3. axios post提交的Content-Type

    使用axios的坑 jQuery.ajax的post提交默认的请求头的Content-Type: application/x-www-form-urlencoded而axios.post提交的请求头是 ...

  4. 以快板之名说Android 应用程序电源管理

    当里个当,当里个当.Android开发UE(用户体验)为导向,首要任务便是省电量. 当里个当,当里个当.有一设备立足于墙边,这个设备唤固定电话.你的app造成这样,用户很快把你弃墙角.你咆哮耗电奈何与 ...

  5. 【Spark】Spark-Redis连接池

    Spark-Redis连接池 jedispool returnresource 遭废弃 用 什么替代_百度知道 spark-stream 访问 Redis数据库示例 - 阿里云 [Redis]Java ...

  6. 用keras实现lstm 利用Keras下的LSTM进行情感分析

    1    I either LOVE Brokeback Mountain or think it’s great that homosexuality is becoming more accept ...

  7. apache 错误:The system cannot find the file specified.

    在启动apache时出现了以下错误信息 Window日志里也记录了此错误信息   而出现此错误的原因是IIS占用了80端口 停止IIS再重新启动apache即可解决   参考: cannot find ...

  8. eclipse中的项目鼠标右键卡死

    1.错误描写叙述 在eclipse中部署了Java Web项目,想在WebContent目录下新建一个目录,鼠标右键时出现eclipse卡死的想象 2.错误原因 (1)插件安装过多 (2)导入的项目过 ...

  9. ASP入门（九）-Request对象小案例

    我们将制作一个能够记住访问者姓名的页面,在这个小案例中,你将学会如何使用Request对象的Cookies.Form以及ServerVariables集合的值,还可以学习到如何使用Response对象 ...

  10. Objective-C 简介

    很少有人会想到 Objective-C 历史悠久,并且它实际上影响了很多其他的编程技术.比如, Java 编程语言和 Objective-C 就有很多共同点.原因就是在 Objective-C 的早期 ...