css如何让一个张图片在盒子中水平垂直居中代码样式

[复制链接]
查看3411 | 回复0 | 2020-7-23 20:57 | 显示全部楼层 |阅读模式
css如何让一个张图片在盒子中水平垂直居中代码样式,网站建设中经常会使用到图片在盒子居中,下面我们看下如何实现这个功能。
  1. <head>
  2. <meta charset="utf-8">
  3. <title>无标题文档</title>
  4. <style>
  5.         .box{
  6.                 width:300px;
  7.                 height:300px;
  8.                 border:1px solid #000;
  9.                 text-align:center;/* 水平居中 */
  10.                 line-height:300px;
  11.         }
  12.         img{
  13.                 vertical-align:middle;        /* 垂直居中 */
  14.         }
  15. </style>
  16. </head>

  17. <body>
  18. <div class="box">
  19.         <img src="3.jpg" width="100" height="100" />
  20. </div>
  21. </body>
复制代码

css如何让一个张图片在盒子中水平垂直居中代码样式

css如何让一个张图片在盒子中水平垂直居中代码样式

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-4-16