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. sscanf 与 sscanf_s

    sscanf 与 sscanf_s 之间的Details sscanf sscanf函数想必大家用的很熟练吧 sscanf函数原型: sscanf(const char* src,format,... ...

  2. MyBatis 的基本要素—核心配置文件

    MyBatis 核心配置文件( mybatis-config.xml),该文件配置了 MyBatis 的一些全局信息,包含数据库连接信息和 MyBatis 运行时所需的各种特性,以及设置和影响 MyB ...

  3. LinuxMint19.1安装搜狗拼音输入法

    Installation 1.到搜狗拼音输入法官网下载Linux版. 2.使用dpkg命令安装deb软件包 $ sudo dpkg -i sogoupinyin_2.2.0.0108_amd.deb ...

  4. 爬虫实战(三) 用Python爬取拉勾网

    目录 0.前言 1.初始化 2.爬取数据 3.保存数据 4.数据可视化 5.大功告成 0.前言 最近,博主面临着选方向的困难(唉,选择困难症患者 >﹏<),所以希望了解一下目前不同岗位的就 ...

  5. HDU 5115 (2014ACM/ICPC亚洲区北京站) D题(Dire Wolf)

    题目传送门 设dp[i][j]为杀掉区间i到j之间的狼需要付出的最小代价,那么dp[i][j]=min{dp[i][k-1]+dp[k+1][j]+a[k]+b[i-1]+b[j+1]} Java代码 ...

  6. Meanshift，聚类算法

    记得刚读研究生的时候,学习的第一个算法就是meanshift算法,所以一直记忆犹新,今天和大家分享一下Meanshift算法,如有错误,请在线交流. Mean Shift算法,一般是指一个迭代的步骤, ...

  7. validate针对checkbox、radio、select标签的验证

    jQuery.validate 是jquery的一个插件,用来辅助开发者在客户端方便快捷的实现表单验证,最终达到提高用户体验的目的. 示例代码 <form id="formLogin& ...

  8. poj 3925 枚举+prime

    /* 因为15很小可以暴力枚举然后用最小生成树的prim来计算 */ #include<stdio.h> #include<string.h> #include<math ...

  9. Linux下汇编语言学习笔记72 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  10. [bzoj1293][SCOI2009]生日礼物（单调队列）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1293 分析: 问题的关键就是选择每种颜色的哪一个好.可以先把每种颜色的第一个一起,更新 ...