如何让img在div中居中显示 1C

图片说明
img如图所示
图片说明
div如图所示,我现在要实现的效果是使img的中间部分显示在div中,两者的css如下:

 .detail_wrapper{
    width:100%;
    height:90%;
 overflow:hidden;
 text-align:center; 
}
.detail_pic{
    height:100%;
display: inline-block; 
margin:auto; 
}

请问应该怎样修改

16个回答

 <div style="height:1000px;background: red;display: flex;align-items: center;justify-content: center;"><img src="1.jpg" alt="" style="display: block;width: 202px;height: 200px;" ></div>
u011323342
流沙无影 你的FCC的ID多少啊?
接近 3 年之前 回复
u011323342
流沙无影 哈哈,可以了,困扰了一下午,晕死了,做好了发给你看下=,=,为什么我先前的不行呢?
接近 3 年之前 回复
sinat_36274927
sinat_36274927 你可以把你那个codepen链接发出来
接近 3 年之前 回复
sinat_36274927
sinat_36274927 回复流沙无影: 我本地不设置宽高也可以啊
接近 3 年之前 回复
u011323342
流沙无影 还是不行啊,应该是我img的width没有限定的缘由,我不限定的原因是因为我想让img的宽按img的height缩放的比例缩放
接近 3 年之前 回复

1、直接控制图片的宽和高,用一个相同大小的div包着它,给这个div一个margin:0 auto 即可;
2、如果不想固定图片的宽高的话就在js中用绝对定位,获取屏幕宽度,图片宽度,然后计算出左边的距离值即可。

u011323342
流沙无影 嗯嗯,谢谢
接近 3 年之前 回复

你的img没有宽度,这样写没有办法居中的,用定位吧

u011323342
流沙无影 我可不可以在JS中算出高度,然后让它居中?怎么定位啊
接近 3 年之前 回复

css定位你可以网上找找

这个怎么发不了代码,哭

我发的代码里面的宽高都可以修改去掉的,我本地图片太大了,所以控制了下宽高,你要是不控制宽高的话就去掉

图片无宽,父元素用的百分比,img也可用百分比这样给父元素添加text-align:center才会生效

mg {display:block; margin:0 auto;}

left=(divwidth-imgwidth)/2;
top=(divheight-imgheight)/2;
样式
div{position:relative;}
img{position:absolute;}

.div {
text-align: center;
border: 1px solid #AAAAAA;
height: 130px;
overflow: hidden;
line-height: 130px;
_display: block;
_font-size: 130px;
_font-family: Arial;
padding-left: 15px;
padding-right: 15px;
}

.div img {
max-width: 100%;
max-height: 130px;
vertical-align: middle;
}

 <div class="div">
    <img src="a.jpg" >
</div>
共16条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
让DIV中的DIV居中显示
最近项目上的问题大部分都是前端页面的问题,所以我自然就跑去修改前端代码了, 发现前端div中的div不是居中显示的,网上说将父级DIV设置为text-align:center 子级设置为margin:0 auto,但是我试了下无效,不知道为什么。后来换了一种方法, 父级Divdisplay: flex; align-items: center; 子级div就居中了
JS+CSS 控制Img在div中居中显示一部分
JS+CSS 控制Img在div中居中显示一部分
div中未知宽高的img垂直居中显示
dasd div { width: 800px; height: 200px; background-color: #eee; line-height: 200px; text-align: center; font-size: 0; // 解决inline-block换行导致的空
css让div居中显示
绝对居中 .xx_div { position: absolute; /* left, right, bottom, top要和position一起使用,margin-*不用 */ top: 0; left: 0; right: 0; bottom: 0; } 这样div框就会绝对显示在网页中间   浮动居中 float只有left和ri...
如何让img在div中居中
在尝试了许多让img在div居中的方法后,个人感觉padding更加适合自己
html之如何让多个并列的div居中显示
<div id="testContainer"> <div><img src="1.png"></div> <div><img src="1.png"></div> <div><img src="1.png"></div> <div><img src="1.png"></div> <div><img src="1.png"></div> <div><i
单行排列中如何让input,img完美垂直居中显示?
单行排列中如何让input,img完美垂直居中显示?rnrndemo地址:rn[url=http://linjuming.megabyet.net/background_position2.htm]垂直居中[/url]rn[img=http://image161.poco.cn/mypoco/myphoto/20100402/12/4609372920100402121253088.jpg][/img]rnrn[code=HTML]rn rnrnrn rn 完美的水平垂直居中!!--兼容ie6,ie7,ff,opera,safari的水平垂直居中rn rnrnrn rn rn rn rn rn rn rn rn 我是文字rn rn 按钮rn rn rn rn rn 以上的图片垂直并且水平居中,您可以改变holder的height和width进行测试rn rn rnrnrnrn[/code]
ul在div中居中显示
ul在div中居中显示: .nav{ text-align:center; } .nav ul{ display:inline-block; height:15px; vertical-align:top;} .nav ul li{display:inline-block; }
Div在浏览器中居中显示
各位大虾,请问怎样让DIV在浏览器居中显示?如果设他的边距的话,换个尺寸的显示器就有不一样了,谢谢了!!!
li标签中,img居中显示
针对html结构为以下做图片居中 1 设置li 的lige-height li{ line-height:568px; vertivcal-align:middle; } li img{ vertical-align:middle; } 2 改变li的盒子模型 li{ display:table-cell; vertical-align:middle;
未知大小的img或div如何水平垂直居中显示?
这里做一下方法总结,便于以后的学习和使用: 方法一:主要利用绝对定位和相对定位实现。 父div相对定位。子标签img绝对定位,并且设置top:0;bottom:0;left:0;right:0;和margin:auto,缺一不可。具体代码如下: html如下: div class="box"> img src="" alt=""> div> css如下:
怎样让div中的img居中
rnasdfasfasfasfdasdfdfasfsdfrnrnrnrn文字不居中,仅仅图片居中(非垂直)
有3个div并排,如何让中间的div居中显示?
[code=HTML]rnrnrnrn div自适应rn rnrnrn 3个部分,中间宽度固定,左右根据内容自适应,如何实现不管左右的宽度怎样变化,dCenter始终居中?rn rn 1111111rn 2222222222222rn rn 3333333333333rn rn rnrnrnrn[/code]
div居中显示
以下是div居中显示的3种方法:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Insert title here</title><style>/*-- 1.vertical-align居中 */ img { vertical-align: middle; }/*vertical-align div居中*/ .div_o
div中img根据不同分辨率居中显示,超出部分隐藏
用div控制div中 img 图片居中显示 如下图黄色区域是一张1920*300的图片如果分辨率超过1920,就完全显示出 居中显示, 如果分辨率是 1440的 就显示出 黄色图片中绿色区域大小,居中显示,如果分辨率是1024,就显示黄色图片粉色区域那么大居中显示。rn代码格式要 的,不要给div设置背景图的,兼容ie 谷歌浏览器rn[img=https://img-bbs.csdn.net/upload/201501/18/1421511398_678121.jpg][/img]
div 中img 居中
原理:行内元素包裹在一个display为block的父级元素中,父级元素text-align:center即可实现行内元素居中div   {text-align: center;}或者img.alignleft  {display: inline;float: left;}img.alignright  {display: inline;float: right;}img.aligncenter ...
img在div中的垂直居中
#picboxwidth:200px;height:200px;text-align:center;vertical-align:middlern#picbox imgwidth:100px;height:100pxrnrn rn rn
如何让背景居中显示
现在的状态:rn1.我做了一个selector用来定义按钮显示的状态rnrn rn rn rn rn rn rn rnrn rnrnrn2.我做了一个LinearLayout里面放了两个按钮rnrn rn rnrn rnrnrn现象:rn两个按钮被拉伸了,充满了整个LinearLayout,这是我想要的状态。rnrn问题:rn按钮上的图片同样被拉伸着充满了整个的按钮。rn能不能图片不被拉伸,只显示在按钮中间,但按钮的区域被拉伸了?
如何让网页居中显示?
如何让网页居中显示?为什么在css中设置了margin: 0 auto;还是不行啊!请帮忙!
如何让图片居中显示
当设定一个div来显示图像时,当图像大的时候是按比例缩小,当图片很小时,如何让它居中显示呢
如何让table居中显示
[img=https://img-bbs.csdn.net/upload/201505/13/1431512997_379328.png][/img]rn如果,我想让这个表格 显示在网页中间。我在 外面又套了一层 rn但是还是没有实现表格居中显示,请问一下,怎么解决?
div中添加背景图片及居中显示
这是第一行文字 这是第二行文字
如何让框架居中显示
我在800*600的分辨率下用框架做了个页面rnrn我想让它在1024*768下居中显示,就好像普通页面一样,可以实现吗?
使div中的图片居中显示
使div中的图片居中显示: 水平居中:div设置:text-align:center; img设置:width:图片宽度;margin:0 auto; .banner1{ width:790px; float:left; margin-left:5px; text-align:center; } 垂直居中:div设置:position:relative
如何实现 IMG 在 DIV 中垂直居中?
如何实现 IMG 在 DIV 中垂直居中?rn急,在线等候立即给分!
div如何显示在img上
如何显示在上?rn这是因为onmouseover和onmouseout不能定位到图像上的 中.
img大于div时居中显示(类似相册总览)
&amp;lt;!doctype html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no, initial
div在页面居中显示
$(window).resize(function(){  $('.className').css({  position:'absolute',  left: ($(window).width() - $('.className').outerWidth())/2,  top: ($(window).height() - $('.className').outerHeight())/2
JS 实现div 居中显示
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS实现div居中</title> <style> /*外层div居中*/ #main { position: absolute; /*极为重要*/ background-color: blue;
浮动div居中显示问题
怎么让里面2个div居中?[code=html] rn rn rn[/code]
如何让div元素(自适应宽度或左浮动)居中显示
要求:只能修改css,不能改变原有的标签类型,如果有可能尽量不要添加新标签rn1:如何让id为"A"的div元素的背景色只占据内容所需的空间并且内容居中(效果与第三个span元素一样)rn2:为id为"B"的div元素添加上float:left,然后如何让这个左浮动元素的背景色只占据内容所需的空间并且内容居中(效果与第三个span元素一样)rnrn[code=HTML]rnrnrnrn rn rnrnrn rn rn AAAArn BBBBrnCCCrnrnrnrnrn[/code]
jquery实现div水平垂直居中显示
div class="index_container"> 样式:width: 1280px; height: 785px; margin: 0 auto;js:$(function () { $(window).on('resize', function(){ var w = ($(window).width() - $(".index_container")
div垂直居中显示
如图所示,怎么处理不定宽度和高度的盒子在大盒子中自动居中显示 解决方法: 父亲盒子相对定位position:relative; 子盒子绝对定位position:absolute;再加上 top:50%; left:50%; transform:translate(-50%,-50%);
如何让控件在panel中居中显示
panel我用的是GridLayout(3,1)布局方式rn在panel中添加的JLabel rn结果jlabel都顶端显示 我想让jlebel居中显示 rn新手请教!
DBGrid中如何让标题和数据居中显示?
如题
怎么让img 的宽度不要超过 div
rn怎么让img 的宽度不要超过 div ,如果超过就自动缩小,不要出现滚动条rnrn谢谢
使div居中显示
1、上下为0左右自动,宽度请忽略! .wrap { width:460px; margin:0 auto; } 2、相对父级body,左边与中部对其,在将自身左移自身宽度的一半,好了,居中。 .wrap { position:relative; width:460px; left:50%; margin-left:-230px }
关于div居中显示的问题
关于div居中显示的问题 要想设置div居中显示,只需要设置margin-right:auto 和 margin-left:auto 切记,这种方法 不能设置浮动,也就是float属性。否则,达不到预期效果!这是第一个博客,以后会完善一些! ...
Html div上下左右居中显示
实现div上下,左右居中显示,,,当是固定高度时候,很好办,,这里展示的是宽度是整个屏幕时候居中显示 源码展示: relative样式 .class{      } #div1{     width:100%;     height:400px;     border:1px red solid;     box-sizing:border-box;
div中img显示问题
xxxx 中设置div .newUserShow div img{width:65%;height:83px;padding-top:8%;} 如果设置img中height:10%;类的,百分数都不能控制效果,width百分数可以控制效果
相关热词 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池 c#5.0 安装程序 c# 分页算法