已知/未知宽高的浮动元素水平居中对齐和图片水平垂直居中对齐

一、已知宽高的浮动元素水平垂直居中对齐

效果：

样式CSS:

 1 <style>
 2     .parent{ 3         position:relative;
 4         border:2px solid #0f0;
 5     }
 6     .child{ 7         float:left;
 8         background-color:#6699ff;
 9         width:200px;
10         height:200px;
11         border:2px solid #f00;
12         position:absolute;
13         top:50%;
14         left:50%;
15         margin-top:-100px;
16         margin-left:-100px;
17     }
18  </style>

模板HTML:

1 <body>
2     <div class="parent">
3         <div class="child"></div>
4     </div>
5  </body>

二、未知宽高的浮动元素水平垂直居中对齐

效果：

样式CSS：

 1 <style>
 2     .parent{ 3         position:relative;
 4         border:2px solid #0f0;
 5     }
 6
 7     .child{ 8         float:left;
 9         background-color:#6699ff;
10         width:260px;//元素宽高随便设定
11         height:260px;
12         border:2px solid #f00;
13
14         margin:auto;
15         position:absolute;
16         top:0;
17         left:0;
18         bottom:0;
19         right:0;
20     }
21  </style>

模板HTML：

1 <body>
2     <div class="parent">
3         <div class="child"></div>
4     </div>
5  </body>

三、图片的水平垂直居中

1.效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>图片垂直居中</title>
 6 </head>
 7 <body>
 8 <style>
 9     .test_box {10         width: 200px;
11         height: 200px;
12         overflow: hidden;
13         text-align: center;
14         font-size: 0;
15         border: 1px solid #ff0000;
16     }
17
18     .test_box .hook {19         display: inline-block;
20         width: 0;
21         height: 100%;
22         overflow: hidden;
23         margin-left: -1px;
24         font-size: 0;
25         line-height: 0;
26         vertical-align: middle;
27     }
28
29     .test_box img {30         vertical-align: middle;
31         border: 0 none;
32     }
33 </style>
34 <div class="test_box">
35     <span class="hook"></span>
36     <a href="#" target="_blank"><img src="22.jpg" alt=""/></a>
37 </div>
38
39 </body>
40 </html>

2.效果：

样式CSS:

 1 <style>
 2         .container{ 3             display:table-cell;
 4             text-align:center;
 5             vertical-align:middle;
 6             width:500px;
 7             height:300px;
 8             border:2px solid #f00;
 9         }
10
11         img{12             width:200px;
13             height:200px;
14             border:2px solid #0f0;
15         }
16
17   </style>

模板HTML:

1 <div class="container">
2     <img src="watermelon.jpg" alt="">
3  </div>

转载于:https://www.cnblogs.com/sunyuweb/p/8494608.html

已知/未知宽高的浮动元素水平居中对齐和图片水平垂直居中对齐相关推荐

编写css让一个已知宽高的div元素水平居中？垂直居中
让一个已知宽高的div元素水平居中 <style> #div1{ width:200px; height:200px; background:#F00; margin:0 auto; } ...
【PDFBox】PDFBox操作PDF文档之添加本地图片、添加网络图片、图片宽高自适应、图片水平垂直居中对齐
这篇文章,主要介绍PDFBox操作PDF文档之添加本地图片.添加网络图片.图片宽高自适应.图片水平垂直居中对齐. 目录一.PDFBox操作图片 1.1.添加本地图片 (1)案例代码 (2)运行效果 ...
高德 android 多边形中心点,完美起航-android高德地图画多边形，已知中心点宽高画矩形，实际距离千米转地图坐标距离...
项目中用到mapabc 绘制矩形区域.客户只能手动选择中心点,并填写区域的宽和高,切单位为km.要求实时显示规划区域. 记录笔记. 第一步找到地图绘制多边形api polygon = map.addP ...
android高德地图绘制多边形_android 高德地图画多边形，已知中心点宽高画矩形，实际距离千米转地图坐标距离...
项目中用到mapabc 绘制矩形区域.客户只能手动选择中心点,并填写区域的宽和高,切单位为km.要求实时显示规划区域. 记录笔记. 第一步找到地图绘制多边形api polygon = map.addP ...
已知长宽高用php求周长体积_PHP工厂模式计算面积与周长
<?phpinterface InterfaceShape{ function getArea(); function getCircumference();} /** * 矩形 */class ...
css面试题实现元素垂直水平居中-包括未知宽高的元素五种回答
css实现元素垂直水平居中-包括未知宽高的元素这个一道很经典的面试题,做项目中也常会出现这样的需求. 现在我就用几种比较常用的方法.兼容性也列出来. 第一种已知宽高(定位加负边距解决)兼容到IE6 ...
CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素( ...
图片 + 未知宽高 + 垂直居中
图片 + 未知宽高 + 垂直居中第一种: table-cell / inline-block + vertical-align 条件: 容器宽高受图片默认宽高影响 html结构: <div&g ...
数据结构——已知数组A[1…n] 的元素类型为整型int，设计一个时间和空间上尽可能高效的算法，将其调整为左右两部分，左边所有元素为奇数，右边所有元素为偶数，不要求对这些元素排序。
题目:已知数组A[1-n] 的元素类型为整型int,设计一个时间和空间上尽可能高效的算法,将其调整为左右两部分,左边所有元素为奇数,右边所有元素为偶数,不要求对这些元素排序. 代码展示: #inclu ...

已知/未知宽高的浮动元素水平居中对齐和图片水平垂直居中对齐

已知/未知宽高的浮动元素水平居中对齐和图片水平垂直居中对齐相关推荐

最新文章

热门文章

已知/未知宽高的浮动元素水平居中对齐 和 图片水平垂直居中对齐

已知/未知宽高的浮动元素水平居中对齐 和 图片水平垂直居中对齐相关推荐

最新文章

热门文章

已知/未知宽高的浮动元素水平居中对齐和图片水平垂直居中对齐

已知/未知宽高的浮动元素水平居中对齐和图片水平垂直居中对齐相关推荐