不固定宽高img在div里水平且垂直居中

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #box{
 8             background:cadetblue;
 9             text-align:center;
10             line-height:800px;
11         }
12
13         img{
14             vertical-align:middle;
15         }
16     </style>
17 </head>
18 <body>
19 <div id="box">
20     <img src="../img/9.jpg" alt="图片" />
21 </div>
22 </body>
23 </html>

时间： 2024-10-09 08:11:40

不固定宽高img在div里水平且垂直居中的相关文章

css 宽高自适应的div 元素如何居中垂直居中

在我们编写css 样式的时候经常会遇见一个问题那就是一个宽高未知的元素要让他垂直居中如何实现这个呢下面是我常用的两种方法上代码下面的是结构代码 <div class="wrap">//此处为父组件我们会设置父级的宽高并让其居中 <div class="center">//子组件我们要实现它的垂直居中不设置他的宽高宽高都由下面的img引入的图片撑开 <img width="100px" src

如何实现固定宽高的DOM元素的水平垂直居中

效果: 实现代码1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{margin: 0; padding: 0;} #div1{ margin-top: 100px; margin

在一个没有固定宽高的容器中,为什么设置position:absolute后就可以全屏显示了?

此场景适用于移动端百分比布局,背景全屏显示. 在一个没有固定宽高的容器中设置背景,想要背景全屏显示,设置宽高100%后还需设置position:absolut; 原因: absolute会脱离normal float, 即该元素会直接以root标签(类似window但不是<html>标签)进行参照,而root标签的高度存在具体数值, 即浏览器视窗高度, 有明确px值. 而relative不会脱离normal float, 他的height会直接依赖直接父元素(em单位也是), 所以百分比计算出

CSS实现垂直水平居中的三个方法：(1)固定宽高 (2)不固定宽高 (3)Flex

这两天迷上逛一些前端技术网站和论坛了,据说学前端要学会记录才能加深印象,所以有事没事还是写些随笔吧. 以前还在一个公司的面试试卷里做到过: 垂直居中: 1.父元素设置position:relative, 子元素设置position:absolute; top:50%; margin-top: -元素高度 2.height: 500px; line-height: 500px; 水平居中: 1.text-align:center 2.margin: 0 auto; 以上是我之前写的答案,接下来看看

css未知宽高的盒子div居中的多种方法

不知道盒子大小.宽高时,如何让盒子上下左右居中? 应用场景:比如上传图片时,并不知道图片的大小,但要求图片显示在某盒子的正中央. 方法1:让4周的拉力均匀-常用  <!DOCTYPE html>

【实习项目记录】(三)调整网络图片固定宽高

很多时候服务器端传过来的图片大小不统一.在ImageView里面设置这个属性可以让图片显示的时候统一大小. android:scaleType="centerCrop" android:scaleType是控制图片如何resized/moved来匹对ImageView的size. android:scaleType值的意义区别: CENTER /center 按图片的原来size居中显示,当图片长/宽超过View的长/宽,则截取图片的居中部分显示 CENTER_CROP / cent

div盒子水平、垂直居中

一.div文本的水平居中:margin:0 auto; 垂直居中:line-height:80px;注释:这里line-height的值要和div的高一致. 二:div盒子居中给最外面的父元素设置宽高给要水平垂直居中的div加定位 location { width:200px; height:200px; background-color: #00FF00; position: relative; top: 50%; left: 50%; margin-top: -100px; margi

DIV设置了固定宽高出现文字(文本)的不能自动换行

如果你的div设置了固定的width和height,有时会出现文字不能自动换行的情况查过相关资料后才知道,只有英文文本才会出现不能自动换行的情况,(中文不存在)而原因是因为英文文本之间没有加空格,浏览器会认为这是一个特别长的单词: 解决方法: 1. 在文本适当位置加空格 2. css代码中加上这行:word-wrap:break-word;

.NET 等宽、等高、等比例、固定宽高生成缩略图类

根据原图片生成等比缩略图 #region 根据原图片生成等比缩略图 /// <summary> /// 根据源图片生成缩略图 /// </summary> /// <param name="imgPath_old">源图(大图)物理路径</param> /// <param name="imgPath_new">缩略图物理路径(生成的缩略图将保存到该物理位置)</param> /// <p