水平居中

text-align:center

垂直居中(vertical-align)

vertical-align:middle;

vertical-align时而没效果

然而真实使用的时候,我们会发现这个属性“时灵时不灵”,有些情况下我们加了这个属性之后仍然不见img或者text有任何的变化。那是因为vertical-align只作用在inline-block或者inline,还有table-cell等元素内。同时这两种还有有所不同。
vertical-align并不是在高度内居中,而是对齐在行高内的middle线上。

所以我总结了两种使用vertical-align居中的方法:

第一种:

<div style="vertical-align: middle;display: table-cell;">
<img src="02.jpg" alt="">
<p>文本居中</p>
</div>

 这种情况下图片和文字可以分行显示文字在图片下面同时图片和文字作为整体在元素内垂直居中。

第二种:

<div style="height:180px;line-height:180px;">
<img src="02.jpg" alt="图片" style="vertical-align:middle;" />
这是文本内容.
</div>

  

这种情况下文字是因为line-height属性而居中,跟vertical-align属性没有关系。同时img对齐在middle线上,但是如果父盒子去掉了line-height属性的话那么将会不起作用。(可以试试bottom和text-bottom的不同。)

DIV文字水平垂直居中的方法的更多相关文章

  1. div盒子水平垂直居中的方法推荐

    父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...

  2. div盒子水平垂直居中的方法

    这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义t ...

  3. div自适应水平垂直居中的方法

    1.Flexbox布局: display:flex; justify-content:center; align-items:center; width:100%; 2.Bootstrap栅格布局 一 ...

  4. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  5. 一个div在另一个div中水平垂直的方法

    html <div id="main"> <div id="box"> 一个div在另一个div中垂直居中实现方法 </div&g ...

  6. 53.CSS---CSS水平垂直居中常见方法总结

    CSS水平垂直居中常见方法总结 1.元素水平居中 当然最好使的是: margin: 0 auto; 居中不好使的原因: 1.元素没有设置宽度,没有宽度怎么居中嘛! 2.设置了宽度依然不好使,你设置的是 ...

  7. Android进阶(二十二)设置TextView文字水平垂直居中

    设置TextView文字水平垂直居中 有2种方法可以设置TextView文字居中: 一:在xml文件设置:android:gravity="center" 二:在程序中设置:m_T ...

  8. Div实现水平垂直居中

    在实际应用中很多地方不仅要求实现元素的水平居中或者垂直居中效果,还可能会在水平方向和垂直方向上都要实现居中效果,下面就简单介绍几种元素水平垂直居中的方法(注:不同的方法会存在一些优缺点以及兼容性问题) ...

  9. css3 flex 详解,可以实现div内容水平垂直居中

    先说一下flex一系列属性: 一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row- ...

随机推荐

  1. 【docker】学习笔记一:制作自己的centos6.9镜像

    前言: 最近开始研究docker,在这里做一个记录. 本来开始想用centos7系列做镜像,毕竟是最新版本的centos,但是centos7有一个严重的bug,就是正常启动的镜像不能使用systemc ...

  2. weblogic开启远程访问的jmx设置

    通过jmx远程访问weblogic获取监控jvm的数据,要在weblogic启动的时候设置一些配置,具体如下: 在weblogic的安装目录:{weblogic_home}/wlserver_10.3 ...

  3. 一个商品SKU是怎么生成的

    首先说一说什么是SKU.......自己百度去... 类似京东上面,未来人类S5这个台笔记本(没错,我刚入手了) 都是S5这个型号,但是因为CPU,显卡,内存,硬盘等不同,价格也不一样.CPU,显卡, ...

  4. Java多线程系列 基础篇04 线程中断

    1. 中断线程 中断可以理解为线程的一个标志位属性,它表示一个运行中的线程是否被其他线程进行了中断操作,其他线程通过调用该线程的interrupt()方法对其进行中断操作,线程通过检查自身是否被中断来 ...

  5. LINQ to Entities 不识别方法"System.String ToString()",因此该方法无法转换为存储表达式 的解决方法

    一.案例1,及解决方案: "LINQ to Entities 不识别方法"System.String ToString()",因此该方法无法转换为存储表达式." ...

  6. C++之封装

    希望暴露public 希望隐藏private 对象实例化有两种方式,从栈实例化,从堆(new出来的)实例化. 以谁做什么作为核心. public 放前面,private放后面(属性可以定义为priva ...

  7. BZOJ 1634 [Usaco2007 Jan]Protecting the Flowers 护花:贪心【局部分析法】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1634 题意: 约翰留下他的N只奶牛上山采木.可是,当他回来的时候,他看到了一幕惨剧:牛们正 ...

  8. html5--1.15 style元素与HTML样式基础

    html5--1.15 style元素与HTML样式基础 学习要点: 1.引入样式的三种方式2.了解style元素插入内联样式表与内部样式表 1.引入样式的三种方式 1.外部样式表:通过 link元素 ...

  9. C#多线程学习 之 线程池[ThreadPool]

    在多线程的程序中,经常会出现两种情况: 一种情况:   应用程序中,线程把大部分的时间花费在等待状态,等待某个事件发生,然后才能给予响应                   这一般使用ThreadPo ...

  10. listen 55

    There are also green card qualifiers for some non-citizens who invest in America, and for refugees.难 ...