css样式之vertical-align垂直居中的应用
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垂直居中的应用的更多相关文章
- css样式让input垂直居中
css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...
- 文字在div中水平和垂直居中的的css样式
文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...
- 使文字在div中水平和垂直居中的的css样式为,四个边分别设置阴影样式
text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...
- css样式之垂直居中
1.div的水平居中 margin:0 auto 2.table-cell实现垂直居中 样式:.box{ width: 200px; height: 200px; background: red; } ...
- css样式,媒体查询,垂直居中,js对象
下面是一些截图,有关查询效率,css样式,媒体查询,垂直居中,js基本类型.
- css样式清零及常用类
css样式清零及常用类 @charset "utf-8"; /*CSS Reset*/ /*"微软雅黑","\5FAE\8F6F\96C5\9ED1& ...
- 常用css样式(布局)
兼容css3新属性 在css3中,我们可以使用prefixfree.min.js这个插件来自动为css3的相关属性加上兼容浏览器属性,使我们不用为每个css3新属性再加上属性(需要用到大量css3的项 ...
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
- 【03】全局 CSS 样式
全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们 ...
随机推荐
- spring cloud (一):大话 Spring Cloud
转自:http://www.ityouknow.com/springcloud/2017/05/01/simple-springcloud.html 研究了一段时间Spring Boot了准备向Spr ...
- 更改Visual Studio Code为中文字体最有效的方法
更改Visual Studio Code为中文字体最有效的方法. 网址: https://marketplace.visualstudio.com/search?target=VSCode& ...
- Luogu P1692 部落卫队
解题思路 数据范围不是很大,那应该不是那些普遍的图论的算法.考虑搜索,用暴力解决.从1到N枚举每一个点的位置,搜索这个点事选还是不选.如果在这个点之前选到的点中又和他冲突的点,那就不选,要么就选. 附 ...
- [Algorithm] 6. Merge Two Sorted Arrays
Description Merge two given sorted integer array A and B into a new sorted integer array. Example A= ...
- JDK的下载---官方
1.去到官方网站 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 根据箭头选择, ...
- static private 与 final 的用法总结
1.static表示静态.他是属于类的.可以在本身类里直接调用,或在其它类里用类名.方法名调用.不加static表示是实例的方法,必须用实例来调用.在本类里也一样,必须用实例调用 2.private是 ...
- vue SSR 部署详解
先用vue cli初始化一个项目吧. 输入命令行开始创建项目: vue create my-vue-ssr 记得不要选PWA,不知为何加了这个玩意儿就报错. 后续选router模式记得选 histor ...
- Centos下Yum安装PHP5.5,5.6,7.0及扩展
默认的版本太低了,手动安装有一些麻烦,想采用Yum安装的可以使用下面的方案: 1.检查当前安装的PHP包 yum list installed | grep php 如果有安装的PHP包,先删除他们 ...
- E - Cricket Field
Description Once upon a time there was a greedy King who ordered his chief Architect to build a fi ...
- TestNG常用注解
原文链接:https://www.yiibai.com/testng/basic-annotations.html 以下是TestNG支持的注释列表: 注解 描述 @BeforeSuite 在该 ...