css样式之vertical-align垂直居中的应用：将图片垂直左右居中

元素垂直居中
1：必须给容器父元素加上text-align：center
2:必须给当前元素转换成行内块元素，display：inline-block，再给当前元素加上vertical-align:middle;
3:在当前元素的后面加上同级元素span,并对span进行vertical-align:middle;width:0;height:100%;display:inline-block;等设置；
垂直对齐方式：vertical-align:top/bottom/middle;
应用于不同图片在div当中垂直居中

代码实例如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

 <style>

 *{margin:0 auto;padding:0;}

 a{text-decoration:none;}

.box{width:600px;height:500px;border:1px solid #C06;}

.box dl{width:198px;height:230px;border:1px solid red;float:left;}

.box dt{width:198px;height:180px;text-align:center;}/*要给a元素的父容器加上text-align：center*/

.box dt a{vertical-align:middle;display:inline-block;}

.box dt span{vertical-align:middle;width:0px;height:100%;display:inline-block;}/*a标签的同级元素*/

 </style>

</head>

<body>

 <div class="box">

     <dl>

    <dt><a href="#"><img src="data:images/mz1.jpg"/></a><span></span></dt>

    <dd>麻花帽</dd>

    <dd>市场价：99现价：19元</dd>

    </dl>

    <dl>

    <dt><a href="#"><img src="data:images/mz2.jpg"/></a><span></span></dt>

    <dd>麻花帽</dd>

    <dd>市场价：99现价：19元</dd>

    </dl>

    <dl>

    <dt><a href="#"><img src="data:images/mz3.jpg"/></a><span></span></dt>

    <dd>麻花帽</dd>

    <dd>市场价：99现价：19元</dd>

    </dl>

 </div>

</body>

</html>

图片居中

css样式之vertical-align垂直居中的应用的更多相关文章

  1. css样式让input垂直居中

    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

  2. 文字在div中水平和垂直居中的的css样式

    文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...

  3. 使文字在div中水平和垂直居中的的css样式为，四个边分别设置阴影样式

    text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...

  4. css样式之垂直居中

    1.div的水平居中 margin:0 auto 2.table-cell实现垂直居中 样式:.box{ width: 200px; height: 200px; background: red; } ...

  5. css样式，媒体查询，垂直居中，js对象

    下面是一些截图,有关查询效率,css样式,媒体查询,垂直居中,js基本类型.  

  6. css样式清零及常用类

    css样式清零及常用类 @charset "utf-8"; /*CSS Reset*/ /*"微软雅黑","\5FAE\8F6F\96C5\9ED1& ...

  7. 常用css样式(布局)

    兼容css3新属性 在css3中,我们可以使用prefixfree.min.js这个插件来自动为css3的相关属性加上兼容浏览器属性,使我们不用为每个css3新属性再加上属性(需要用到大量css3的项 ...

  8. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  9. 【03】全局 CSS 样式

    全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们 ...

随机推荐

  1. 干货分享--iOS及Mac开源项目和学习资料【超级全面】

    原文出处:codecloud http://www.kancloud.cn/digest/ios-mac-study/84557

  2. 洛谷——P3811 【模板】乘法逆元

    P3811 [模板]乘法逆元 线性求逆元 逆元定义:若$a*x\equiv1 (\bmod {b})$,且$a$与$b$互质,那么我们就能定义: $x$为$a$的逆元,记为$a^{-1}$,所以我们也 ...

  3. python list排序（正倒）以及获取重复数据

    mylist = [2,2,2,2,5,5,7,2,2,3,3,3,3] #<class 'list'>: [2, 2, 2, 2, 5, 5, 7, 2, 2, 3, 3, 3, 3] ...

  4. 51NOD 1385凑数字（找规律？）

    >>点击进入原题测试<< 思路:这个题是真的想了蛮久,枚举了一下前一百就发现了规律,要想最短的话就是要构建1234567890这个字符串:刚开始找到的规律从1开始枚举到N,每满 ...

  5. sublime3注册码

    TwitterInc User License EA7E 1D77F72E 390CDD93 4DCBA022 FAF60790 61AA12C0 A37081C5 D0316412 4584D136 ...

  6. python——re模块（正则表达式）

    re 模块的使用: 1.使用compile()函数编译一个parttern对象, 例如:parttern=re.compile(r'\d+') 2.通过pattern对象提供的一系列属相和方法,对文本 ...

  7. nyoj_278_排队_201403282135

    排队 时间限制:3000 ms  |  内存限制:65535 KB 难度:1   描述 周末了,软件ACM的队员准备玩玩游戏,娱乐一下,CY想了一个好主意,所有队员站成一个圈,从1开始报数,凡是报出指 ...

  8. JAVA虚拟机运行时内存划分--运行时数据区域

    Java虚拟机在执行java程序时会把内存划分为以下几个不同的数据区域: java虚拟机内存划分(运行时)1.线程私有的: 程序计数器(Program Counter Register):可以看作当前 ...

  9. Spring实现封装自定义注解@Trimmed清除字符串前后的空格

    在Spring中实现字符串清除的方法有很多,原生方法String自带trim()方法,或者使用StringUtils提供的trim...方法. 通常可以将上面的方式封装成自定义注解的形式去实现来节省更 ...

  10. SQL Server memory – Internals

    https://blogs.msdn.microsoft.com/karthick_pk/2013/03/16/sql-server-memory-internals/