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. videojs

    <link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet"> &l ...

  2. css--小白入门篇3

    一.上篇知识复习 css属性,面试的时候会有笔试,笔试没有智能感应的: ● 加粗,倾斜,下划线: 1 font-weight:bold; 2 font-style:italic; 3 text-dec ...

  3. Python学习-字符串函数操作3

    字符串函数操作 isprintable():判断一个字符串中所有字符是否都是可打印字符的. 与isspace()函数很相似 如果字符串中的所有字符都是可打印的字符或字符串为空返回 True,否则返回 ...

  4. MySQL Docker方式安装

    以5.7版本为例 1 配置mysql配置文件编辑/etc/my.cnf,添加以下内容: [mysqld] skip-host-cache skip-name-resolve datadir=/var/ ...

  5. python基础面试题30问（附带答案）

    1.     闭包 定义:闭包是由函数及其相关的引用环境组合而成的实体(即:闭包=函数+引用环境)(想想Erlang的外层函数传入一个参数a, 内层函数依旧传入一个参数b, 内层函数使用a和b, 最后 ...

  6. (六)python3 字符串常用方法

    字符串截取  >>>s = 'hello' >>>s[0:3] 'he' >>>s[:] #截取全部字符 'hello' 消除空格及特殊符号   ...

  7. 洛谷 1472 奶牛家谱 Cow Pedigrees

    [题解] DP题,我们用f[i][j]表示有n个节点.高度小于等于j的二叉树的个数.f[i][j]=sigma(f[t][j-1]*f[i-t-1][j-1]) t是1~i-1范围内的奇数. #inc ...

  8. App后台开发运维和架构实践学习总结（5）——App产品从需求到研发到开发到上线到产品迭代全过程

    前言 如果没有做过开发,研发过产品的人,很难体会做产品的艰难,刚进公司的人,一般充当的是程序开发,我这里说的是开发,它与研发是有区别的. 一个需求下来,如果不能很好地理解产品需求,如果不能很好的驾驭需 ...

  9. fzu2143 Board Game

    Board Game Accept: 54    Submit: 151Time Limit: 1000 mSec    Memory Limit : 32768 KB  Problem Descri ...

  10. noip模拟赛 罪犯分组

    分析:看了题后没别的思路,感觉就是dp,普通dp的话状态和方程实在是不好设计,观察数据,发现N非常小,暗示了这道题要用状压dp来做. 先枚举每个集合,再用O(n^2)的暴力看这个集合内有多少个冲突,如 ...