转自: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. ElasticSearch客户端注解使用介绍

    The best elasticsearch highlevel java rest api-----bboss 1.ElasticSearch客户端bboss提供了一系列注解 @ESId  用于标识 ...

  2. 集成学习总结 & Stacking方法详解

    http://blog.csdn.net/willduan1/article/details/73618677 集成学习主要分为 bagging, boosting 和 stacking方法.本文主要 ...

  3. Mahout分步式程序开发 基于物品的协同过滤ItemCF

    http://blog.fens.me/hadoop-mahout-mapreduce-itemcf/ Hadoop家族系列文章,主要介绍Hadoop家族产品,常用的项目包括Hadoop, Hive, ...

  4. 【python3】 enumerate用法总结（转）

    http://blog.csdn.net/churximi/article/details/51648388 enumerate()说明 enumerate()是python的内置函数 enumera ...

  5. linux运维需要掌握的基础知识

    踏入linux运维工程师这一职业,其实有很多工具技能需要掌握,下面我来给大家一一介绍. 1.shell脚本和另一个脚本语言,shell是运维人员必须具备的,不懂这个连入职都不行,至少也要写出一些系统管 ...

  6. VS2013开发一个简单的asmx接口程序

    一.开发和调试 1:创建一个ASP.NET web应用程序 2:选择空的模板 3:系统生成项目目录 4:右键项目-添加项-新建项 5:选择Web  服务(ASMX) 6:选择之后项目中会有一个Test ...

  7. Cognos11中报XQE-JDB-0004查找驱动程序类错误

    1:问题描述,在cognos11中创建了一个数据源连接TestData, 类型为Microsoft SQL Server (OLE DB) 操作如下: 同时配置了jdbc的连接方式,如下图所示 测试数 ...

  8. Google声明机器学习在自己定制的芯片比方普通的GPU和CPU快15到30倍

    GOOGLE开发自己的加速机器学习的芯片已经不是什么秘密了,最先发布出来的是TPU(Tensor Processing Units),在2016年5月I/O开发大会上发布的.可是没有发布相关的细节情况 ...

  9. 有用的java工具

    1.Jsoup html页面解析 2.FastJson java中json处理工具,类似于gson 3.jodd 类似于apache commons的一些常用工具集 4.Selenium IDE we ...

  10. NSString json 车NSDictionary

    NSData *jsonContent = [[userInfo objectForKey:@"acme"] dataUsingEncoding:NSUTF8StringEncod ...