转自: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. 为Linux操作系统所在的logical volumn扩容

    感谢Lieven和Tom的协助,这个问题才得以解决.我在这里把解决问题的步骤总结一下,帮助自己学习. 问题描述 =========== 笔者有一台linux的物理机,其上名为centos-root的l ...

  2. 使用 CSS 接收用户的点击事情并对相关节点进行操作

    问题背景:使用纯 CSS 方案,实现导航栏tab切换 实现 Tab 切换的难点在于如何使用 CSS 接收到用户的点击事情并对相关的节点进行操作.即是: 如何接收点击事件 如何操作相关DOM 下面看看如 ...

  3. Android -- tools

    工具属性 Android 有一个专用的XML命名空间,用于使工具可以记录XML文件里的信息,并且在打包程序的进行把信息剥离到不会带来运行时期和下载大小的负面影响的程度. 这个命名空间的 URI 是 h ...

  4. ubuntu忘记root密码 的解决方法

    alt+f2,在弹出的运行窗口中输入:gnome-terminal,回车. 即进入终端 输入:sudo passwd root,回车后会提示你输入你当前用户的密码 之后 按提示输入两次root的密码( ...

  5. 解决Ubuntu/debian的Apt-get 由于依赖关系安装失败的问题

    The following packages have unmet dependencies: libssl-dev: Depends: libssl0.9.8 (= 0.9.8k-7ubuntu8) ...

  6. c# event Action 判断事件列表中是否存在这个委托

    using UnityEngine; using System.Collections; using System; public class eventTest : MonoBehaviour { ...

  7. Android利用RecognizerIntent识别语音并简单实现打电话动作

    关于Android利用RecognizerIntent识别语音并简单实现打电话,详细看实现代码例如以下: package com.example.recognizerintentactivity; i ...

  8. Solidworks公司电脑图纸被加密之后如何解密输出

    第一步:打开总装配的组件(该组件需要包含你所有需要的零件),比如打开其中一个:   第二步:Solidworks的菜单中依次:"文件"→"打包"(有的版本是pa ...

  9. 树莓派中找不到/dev/video0的解决方案及RaspberryCam的使用

    一.原因 当使用CSI连接的方式将摄像头模块连接树莓派后,在/dev/中找不到video0,因此使用一些第三方库(如Opencv或RaspberryCam)去调用摄像头时,无法调用成功. 二.解决方法 ...

  10. [转]java 自动装箱与拆箱

    转自:http://www.cnblogs.com/shenliang123/archive/2012/04/16/2451996.html 这个是jdk1.5以后才引入的新的内容,作为秉承发表是最好 ...