css样式之vertical-align垂直居中的应用

时间：2022-06-08 09:15:32

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样式&lpar;布局&rpar;

    兼容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. C&num; 获取当前域的路径值

    做域认证的情况下, 要先获取域的path, 可以先用代码获取当前域的path. string pathCur = "LDAP://RootDSE"; DirectoryEntry ...

  2. Logstash安装及部署

    安装及部署 一.环境配置 操作系统:Cent OS 7 Logstash版本:2.1.1.tar.gz JDK版本:1.7.0_51 SSH Secure Shell版本:XShell 5 二.操作过 ...

  3. 【转】对抗拖库 &horbar;&horbar; Web 前端慢加密

    0×00 前言 天下武功,唯快不破.但密码加密不同.算法越快,越容易破. 0×01 暴力破解 密码破解,就是把加密后的密码还原成明文密码.似乎有不少方法,但最终都得走一条路:暴力穷举.也许你会说还可以 ...

  4. ASP&period;NET MVC- JSON &comma;Jquery&comma; State management and Asynch controllers

    一.JSON  MVC And JQuery In case you are new to JSON please read this before moving ahead with this la ...

  5. alibaba的COBAR真是强大&period;

    近好不容易抽空研究了下Cobar,感觉这个产品确实很不错(在文档方面比Amoeba强多了),特此推荐给大家.Cobar是阿里巴巴研发的关系型数据 的分布式处理系统,该产品成功替代了原先基于Oracle ...

  6. 编程菜鸟的日记-初学尝试编程-C&plus;&plus; Primer Plus 第6章编程练习7

    #include <iostream> #include <string> #include <cctype> using namespace std; int m ...

  7. C&num; Vs2017启动调试，debug或者release调试状态闪一下程序就独立运行了

    最近发现一个没太大影响但是很奇怪的事情,编辑状态下点击调试,发现和之前的项目不一样,调试状态闪一下,程序就“独立了”,不受调试状态的控制了. 找了半天才发现,是在program.cs里加了一段代码引起 ...

  8. Cotex-M4简介

    ARM Cortex™-M4 处理器是由 ARM 专门开发的最新嵌入式处理器,用以满足需要有效且易于使用的控制和信号处理功能混合的数字信号控制市场. 高效的信号处理功能与 Cortex-M 处理器系列 ...

  9. iOS - 获取安装所有App的Bundle ID

    先导入#import <objc/runtime.h>头文件 使用runtime获取设备上的所有app的bundle id // Class LSApplicationWorkspace_ ...

  10. Appium 自动化测试&lpar;9&rpar; -- 在Uiautomator中查看webview元素

    在uiautomator中,直接查看不到webview中的元素,不知道大家遇到过没有?如下 解决方法如下: step0:将uiautomator关闭 step1:在appium 中,设置Android ...

相关文章