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. 诊断：ORA-38760: This database instance failed to turn on flashback database

    $ oerr ora 38760 38760, 00000, "This database instance failed to turn on flashback database&quo ...

  2. 树状数组 & lowbit()

    看了很多大佬的博客,每看一篇博客懂一部分,总算是大概理解了树状数组这个神奇又强大的东西: 在这里我做个整合,把我认为好的部分摘录下来: 参考博客1:https://blog.csdn.net/flus ...

  3. Luogu P4014 「 网络流 24 题 」分配问题

    解题思路 还是建立超级源点和超级汇点,又因为题目给出规定一个人只能修一个工件,所以建图的时候还要讲容量都设为$1$. 人的编号是$1\rightarrow n$,工件的编号是$n+1\rightarr ...

  4. HDU - 6266 - HDU 6266 Hakase and Nano （博弈论）

    题意: 有两个人从N个石子堆中拿石子,其中一个人可以拿两次,第二个人只能拿一次.最后拿完的人胜利. 思路: 类型 Hakase先 Hakase后 1 W L 1 1 W W 1 1 1 (3n) L ...

  5. Python学习第二阶段Day2，模块subprocess、 logging、re

    1.logging 日志开关,设置全局只打印什么级别的日子,默认是warning以下的都不打印 改默认级别:依次升高 logging.debug("") logging.info( ...

  6. docker插件

    import docker c = docker.Client(base_url='unix://var/run/docker.sock',version='1.15',timeout=10) pri ...

  7. Windows学习总结（9）——Windows系统常用的网络控制指令

    ping 命令式用来测试TCP/IP 网络是否畅通或者网络连接速度的命 令,其原理是根据计算机唯一标示的IP 地址,当用户给目的地址发 送一个数据包时,对方就会返回一个同样大小的数据包,根据返回的 数 ...

  8. java多线程synchronized volatile解析

    先简单说说原子性:具有原子性的操作被称为原子操作.原子操作在操作完毕之前不会线程调度器中断.即一个操作或者多个操作 要么全部执行并且执行的过程不会被任何因素打断,要么就都不执行.在Java中,对除了l ...

  9. Shell中的循环语句实例

    1.for循环语句实例1.1 最基本的for循环 #!/bin/bash for x in one two three four do     echo number $x done 注:" ...

  10. 另一套备用的代码，通过service调用和登陆用户交互

    结合这两个东东,应该差不多可以搞定我需要的事情啦. 因为更改不了service代码,所以希望从service调用的代码里,争脱出来,和本地登陆用户进行交互启动. #include <window ...