转自: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. [PowerShell Utils] Remotely install Hyper-V and Failover Cluster feature on a list of windows 2012 servers

    Hello everyone, this is the second post of the series. .   Background =============== In my environm ...

  2. vue嵌套路由总结

    嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思. 比如在vue中,我们如果不使用嵌套路由,那么只有一个<router-view>,但是如果使用,那么在一 ...

  3. Python科学计算技巧积累四——双y轴图像绘制

    双y轴图像具有单y轴图像没有的对比效果,在MATLAB中有plotyy函数可以实现,Python的实现方式没有MATLAB那样方便,不过实现效果却也不见得差. 以往我常用的绘图命令是import ma ...

  4. bp算法中为什么会产生梯度消失？

    作者:维吉特伯链接:https://www.zhihu.com/question/49812013/answer/148825073来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  5. java根据图片路径下载到服务器方案 （转）

    http://www.cnblogs.com/thinkingandworkinghard/articles/5589484.html 平常做的工作中,有一部分是同步数据的.但是同步的过程中碰到个问题 ...

  6. MySQL 常用函数之——substr()

    substr()函数是用来截取数据库某一列字段中的一部分 常用的方式是: SBUSTR(str,pos); 就是从pos开始的位置,一直截取到最后. SUBSTR(str,pos,len); 这种表示 ...

  7. 7.4 Javascript:表单验证-揭开正則表達式的面纱

    用元字符匹配对应的字符类型 创建正則表達式有点像创建字符串字面量,仅仅只是正則表達式出如今一对"/"里 正則表達式中会用到一级元字符.用于连接字母与数字 "." ...

  8. @TargetAPI + 版本判断实现高低API版本兼容

    安卓开发中,在低版本SDK使用高版本的API会报错.一般处理方法是换一种实现方法,或者在高版本SDK中使用高版本API,低版本SDK中使用效果可能会差点的折衷方案:后者可以用如下技巧来实现. 步骤 S ...

  9. 【Android界面实现】使用PagerTabStrip实现有滑动标签的Viewpager

    在ViewPager这样的能够滑动的控件上,总是有非常多的文章能够做.上次的文章,我们实现了一个自己定义的ViewPager的指示器,这篇文章,我们主要是想利用Android自带的控件,实现一个指示器 ...

  10. ASP.NET绑定学习

    1.直接绑定到页面成员<asp:Repeater ... DataSource='<%#页面方法或属性%>'></asp:Repeater> 2.绑定到数组< ...