纯css实现div容器内图片上下左右居中

 时间:2026-04-24 12:28:09

1、新建html文档。

</div>

纯css实现div容器内图片上下左右居中

4、初始化css代码。

<style>

*{ margin:0; padding:0; list-style:none;}

img{ border:none;}

button, input, select, textarea { font-size: 100% }

textarea { font: 14px/20px "微软雅黑" }

button { border: 0 }

li { list-style: none }

img { border: 0; }

a { color: #06c; text-decoration: none; cursor: pointer; outline: none; hide-focus:expression(this.hideFocus = true);}

a:hover { color: #06c; text-decoration: underline }

.left{ float:left;}

.right{ float:right;}

.clear:after{content:"";display:block;visibility:hidden;height:0;clear:both;}

.clear{zoom:1}</style>

纯css实现div容器内图片上下左右居中

5、书写css代码。

.aaa{ width:600px; height:400px; margin:100px auto;text-align:center;vertical-align:middle;display:block;position:relative; background:#ddd;}

.aaa a{display:table-cell;vertical-align:middle;width:600px; height:400px; }

.aaa a img{max-width:600px;max-height:400px; }

6

纯css实现div容器内图片上下左右居中

7、代码整体结构。

纯css实现div容器内图片上下左右居中

8、查看效果。

纯css实现div容器内图片上下左右居中

  • 怎样查看Eclipse的版本及版本代号
  • 如何使用CSS3弹性盒子display:flex布局
  • css如何制作圆角正方形
  • 网页色彩搭配原则
  • dreamweaver中框架集可以在网页中自由调整宽高
  • 热门搜索
    怎么做简历表格 路由器不稳定 如何删除页眉页脚 没带身份证如何坐高铁 五台山旅游地图 肚子怎么了 苏k是哪里的车牌 图层混合模式在哪里 如何计算预产期 吸收不好怎么调理