博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
大小不确定图片垂直居中
阅读量:5077 次
发布时间:2019-06-12

本文共 674 字,大约阅读时间需要 2 分钟。

如果图片大小不确定,怎样使图片在DIV中垂直水平居中呢?当然,如果用表格的话,另当别论了。这里只讨论使用css来控制的情况。

     如果只是水平方向居中的话,用text-align:center;(火狐中用margin:0 auto;)这个属性就可以了。但是,垂直方向的居中好像很难做到,无论是用css里的"vertical-align:middle;",还是用img的align="absmiddle",图片在垂直方向似乎都无动于衷。

     发现了如下一个方法,做个收藏。

 

样式部分:

.middle-out{

       width: 600px; 

       height: 385px; 

       position: relative; 

       display: table-cell;

       vertical-align: middle;

       text-align:center;

       border: 1px solid #f00;

 }

.middle-in{

       position: static;

       *position:absolute;

       top:50%;

 }

.middle-out .middle-in  img{

       position:static;

       *position:relative;

       top:-50%;

       left:-50%;

 }

HTML部分:

<div class="middle-out">

  <div class="middle-in">

          <img src="" />

     </div>

</div>

转载于:https://www.cnblogs.com/bxzz/p/4192012.html

你可能感兴趣的文章
TestNG入门
查看>>
【ul开发攻略】HTML5/CSS3菜单代码 阴影+发光+圆角
查看>>
[ZJOI2007]棋盘制作 【最大同色矩形】
查看>>
IOS-图片操作集合
查看>>
模板统计LA 4670 Dominating Patterns
查看>>
团队项目开发客户端——登录子系统的设计
查看>>
IO—》Properties类&序列化流与反序列化流
查看>>
session如何保存在专门的StateServer服务器中
查看>>
react展示数据
查看>>
测试计划
查看>>
选择器
查看>>
Mysql与Oracle 的对比
查看>>
jquery实现限制textarea输入字数
查看>>
thinkphp5 csv格式导入导出(多数据处理)
查看>>
PHP上传RAR压缩包并解压目录
查看>>
Codeforces 719B Anatoly and Cockroaches
查看>>
jenkins常用插件汇总
查看>>
c# 泛型+反射
查看>>
第九章 前后查找
查看>>
Python学习资料
查看>>