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. P1269 信号放大器

    P1269 信号放大器 给一棵有根树,树的边上有距离.根上有一个信号发射器,会发生强度为 h 的信号,信号会往所有的节点传播,然而每经过一条边强度就会削减距离的大小,当信号到达某点时小于 1,则信号传 ...

  2. Re0:DP学习之路 数塔 HDU - 2084（基础递推）

    解法 首先是输入的问题,输入的时候还要注意每一层都有多少个 然后是怎么求解,一般求解首先要考虑顺序,是正序还是倒序 如果这个题是正序的话那么最终还需要将最后一行进行一次找max的运算 如果是倒序的话那 ...

  3. 抓包工具的感触（charles and fiddler）

    最近测mobile,一直徘徊在fiddler 和 charles之间: charles 的证书装了 ,才能正常抓包: 后来因为重定向,分享到扣扣,微信的跳转功能,跳转到wap 或者跳转到PC  或者跳 ...

  4. RANS VS LES

    Turbulence models

  5. orcad中注意的事情

    1.地的标识不能放到已经分配了网络的线上. 在用orcad画原理图的时候,把电源放到网络的时候需要特别的注意,如果,将电源地直接放到线上,而这根线又已经被分配了网络标号,那这个地会随已经分配了的网络号 ...

  6. SpringSecurity 获取认证信息 和 认证实现

    JdbcDaoImpl 实现获取认证信息 PasswordEncoder 实现具体认证过程

  7. java 使用OpenOffice文件实现预览

    1.安装OpenOffice软件 安装教程:https://jingyan.baidu.com/article/c275f6ba12c07ce33d756732.html 2.安装完成后,创建项目,p ...

  8. unigui导出TMS.Flexcel【5】

    参考代码 procedure TUniFrmeWebEmbedBase.ExportData; //导出到excel var FlexCelImport1: TExcelFile; i, rowind ...

  9. 【Codeforces 140C】New Year Snowmen

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 每次都选择剩余个数最多的3个不同数字组成一组. 优先消耗剩余个数多的数字 这样能尽量让剩余的数字总数比较多,从而更加可能得到更多的3个组合 [ ...

  10. JavaSE 学习笔记之包装类（十七）

    基本数据类型对象包装类:是按照面向对象思想将基本数据类型封装成了对象. 好处: 1:可以通过对象中的属性和行为操作基本数据. 2:可以实现基本数据类型和字符串之间的转换. 关键字   对应的类名 by ...