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. spring cloud (一):大话 Spring Cloud

    转自:http://www.ityouknow.com/springcloud/2017/05/01/simple-springcloud.html 研究了一段时间Spring Boot了准备向Spr ...

  2. 更改Visual Studio Code为中文字体最有效的方法

    更改Visual Studio Code为中文字体最有效的方法. 网址:  https://marketplace.visualstudio.com/search?target=VSCode& ...

  3. Luogu P1692 部落卫队

    解题思路 数据范围不是很大,那应该不是那些普遍的图论的算法.考虑搜索,用暴力解决.从1到N枚举每一个点的位置,搜索这个点事选还是不选.如果在这个点之前选到的点中又和他冲突的点,那就不选,要么就选. 附 ...

  4. [Algorithm] 6. Merge Two Sorted Arrays

    Description Merge two given sorted integer array A and B into a new sorted integer array. Example A= ...

  5. JDK的下载---官方

    1.去到官方网站 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 根据箭头选择, ...

  6. static private 与 final 的用法总结

    1.static表示静态.他是属于类的.可以在本身类里直接调用,或在其它类里用类名.方法名调用.不加static表示是实例的方法,必须用实例来调用.在本类里也一样,必须用实例调用 2.private是 ...

  7. vue SSR 部署详解

    先用vue cli初始化一个项目吧. 输入命令行开始创建项目: vue create my-vue-ssr 记得不要选PWA,不知为何加了这个玩意儿就报错. 后续选router模式记得选 histor ...

  8. Centos下Yum安装PHP5.5,5.6,7.0及扩展

    默认的版本太低了,手动安装有一些麻烦,想采用Yum安装的可以使用下面的方案: 1.检查当前安装的PHP包 yum list installed | grep php 如果有安装的PHP包,先删除他们 ...

  9. E - Cricket Field

    Description   Once upon a time there was a greedy King who ordered his chief Architect to build a fi ...

  10. TestNG常用注解

    原文链接:https://www.yiibai.com/testng/basic-annotations.html    以下是TestNG支持的注释列表: 注解 描述 @BeforeSuite 在该 ...