css 水平垂直居中

时间:2022-01-28 03:43:47

主要是垂直居中有点麻烦,以下代码可以实现,先记下来:

<style type="text/css">

   div{ border:1px solid #ccc; height:500px; width:500px; text-align:center; margin:0 auto; background:#ccc;}

   img{ vertical-align:middle; }

   div span{ height:100%; width:0; overflow:hidden; display:inline-block; vertical-align:middle; }

</style>

<div class="test">

<img src="icon.png"><span> </span>

</div>

  

css 水平垂直居中的更多相关文章

  1. CSS水平垂直居中总结

    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head&gt ...

  2. css水平垂直居中对齐方式

    1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...

  3. 把简单做好也不简单-css水平垂直居中

    44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...

  4. CSS水平垂直居中的方法

    原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...

  5. css 水平垂直居中总结

    空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...

  6. CSS水平垂直居中的几种方法2

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  7. CSS水平垂直居中的几种方法

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  8. 常见的几种 CSS 水平垂直居中解决办法

    用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...

  9. 介绍一种css水平垂直居中的方法(非常好用!)

    这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...

  10. css水平垂直居中

    margin法(水平居中) 需要满足三个条件: 元素定宽 元素为块级元素或行内元素设置display:block 元素的margin-left和margin-right都必须设置为auto 三个条件缺 ...

随机推荐

  1. NSLog 自定义 屏蔽

    1.如何自定义NSLog呢? 直接在工程的XXX_Prefix.pch中加入以下语句(就相当于在全局中定义了)#define NSLog NSLog(@"#%s##%d#",str ...

  2. xorm使用pgsql的例子

    测试表 /* Navicat Premium Data Transfer Source Server : localhost Source Server Type : PostgreSQL Sourc ...

  3. Golang fmt包使用小技巧

    h1 { margin-top: 0.6cm; margin-bottom: 0.58cm; direction: ltr; color: #000000; line-height: 200%; te ...

  4. 编译器重复定义错误:error C2371&colon; &&num;39&semi;SIZE&&num;39&semi; &colon; redefinition&semi; different basic types

    我们常常会定义自己工程用的数据类型,可能会与Windows的基本数据类型冲突. vs会报重复定义错误:error C2371: 'SIZE' : redefinition; different bas ...

  5. 621&period; Task Scheduler

    https://www.cnblogs.com/grandyang/p/7098764.html 将个数出现最多的那个字符作为分隔的标准,一定是最小的.所以这个时候只需要计算还需要添加多少个idel就 ...

  6. kafka 删除topic清空数据

    原 kafka 删除topic清空数据 2018年11月20日 18:17:50 Ming! 阅读数:1391   版权声明:版权声明:本文为博主原创文章,未经博主允许不得转载. https://bl ...

  7. VB 共享软件防破解设计技术初探(一)

    VB 共享软件防破解设计技术初探(一) ×××××××××××××××××××××××××××××××××××××××××××××× 其他文章快速链接: VB 共享软件防破解设计技术初探(二)http ...

  8. word中批量修改图片大小

    一,在word中按alt+f11组合键,进入VBA模式二,在左边的工程资源管理器中找到你的word文档,在其上右键/添加/模块三,把下面代码复制,粘贴进去.四,更改数值, 改一下宽度和高度数值(10) ...

  9. python推荐书籍

    推荐的python电子书 python学习路线图 优先级 入门:python核心编程 提高:python cookbook 其他 (1).数据分析师 需要有深厚的数理统计基础,但是对程序开发能力不做要 ...

  10. Inside the C&plus;&plus; Object Model:构造语意(chapter5)

    看到构造语意的其中一节“继承体系下的对象构造”(5.2节)的最后,看来原文,发现侯杰的翻译有问题,怪不得读起来不顺. What about when providing an argument for ...