转自: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. 【Scala】Scala-case-参考资料

    Scala-case-参考资料 scala case_百度搜索 Scala School - 基础知识(续) scala case匹配值 - CSDN博客 scala入门教程:scala中的match ...

  2. vim高级用法

    http://vim.wikia.com/wiki/Using_command-line_history ----------------------------------------------- ...

  3. ASP入门（十）-Session对象

    在ASP中,有两个内部对象可以进行一些信息存储,它们是 Application 对象和 Session 对象,其中 Application 对象是对于整个应用程序期间而言的,它对于所有访问网站的用户来 ...

  4. [Canvas]用透明PNG图在背景上画前景能不遮挡背景

    欲看动态效果请点击下载并用Chrome/Firefox浏览器打开index,html. 图例: 从效果可以明显的看到,五角星边缘和中心都没有对背景遮挡. 代码: <!DOCTYPE html&g ...

  5. matlab之simulink仿真入门

    Matlab Simulink仿真工具的应用 ****Simulink是一个用来对动态系统进行建模.仿真和分析的软件包.使用Simulink来建模.分析和仿真各种动态系统(包含连续系统.离散系统和混合 ...

  6. Mybatis 自定义SqlSessionFactoryBean扫描通配符typeAliasesPackage

    typeAliasesPackage 默认只能扫描某一个路径下,或以逗号等分割的 几个路径下的内容,不支持通配符和正则,采用重写的方式解决 package com.xxxx.xxx.util.comm ...

  7. 【Linux】好玩的linux命令

    Linux里面有很多有趣的东西,这篇文章整理了一些.摘录一下: 1. sl 命令 你会看到一辆火车从屏幕右边开往左边...... 安装  $ sudo apt-get install sl 运行  $ ...

  8. JMeter运行通过Chrome打开的website

    部分website在chrome上运行正常,但在IE环境运行会存在问题.而是用 JMeter运行通过chrome打开的website时候,需要处理一下. 可以参考下面几篇文章: http://ninj ...

  9. Ubuntu MYSQL环境搭建

    前期准备: 检查系统资源 内存大小 # grep MemTotal/proc/meminfo 检查系统版本 统一为: Ubuntu 12.04.1 LTS(GNU/Linux 3.2.0-29-gen ...

  10. VB.NET版+三层实现登陆

    三层已经学了一些时间了,開始认为自己能够用C#敲代码了,就用C#写了一个实现登陆的,真正再用在机房中.还是认为非常吃力的,所以.决定用vb.net敲了.以下是我用vb.net实现的登陆.能够给大家做一 ...