如何在更大的div内使图像中心(垂直和水平)居中[重复]
我有一个div 200 x 200像素。 我想在div的中间放置一个50 x 50像素的图像。
如何做呢?
我可以通过使用text-align: center
div的text-align: center
使其水平居中。 但是垂直对齐是个问题。
#1楼
在CSS中,方法如下:
img
{display:table-cell;vertical-align:middle;margin:auto;
}
#2楼
这有点晚了,但是这是我用来在父div中垂直对齐元素的解决方案。
当您知道容器div的大小而不是所包含图像的大小时,这很有用。 (在使用灯箱或图像轮播时,通常是这种情况)。
这是您应该尝试的样式:
container div{display:table-cell;vertical-align:middle;height:200px;width:200px;}img{/*Apply any styling here*/ }
#3楼
在旧的浏览器中工作(IE> = 8)
绝对位置与自动边距相结合,可以使元素水平和垂直居中。 元素位置可以基于使用相对定位的父元素位置。 查看结果
img {position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;
}
#4楼
我有一个图片库,之前我不知道它们的确切高度或宽度,我只知道它们比要包含的div小。
通过对容器上的行高设置进行组合并在image元素上使用vertical-align:middle ,我终于使用以下HTML标记和以下CSS将其用于FF 3.5,Safari 4.0和IE7.0。
HTML标记
<div id="gallery"><div class="painting"><a href="Painting/Details/2"><img src="/Content/Images/Paintings/Thumbnail/painting_00002.jpg" /></a></div><div class="painting">...</div>...</div>
CSS
div.painting
{float:left;height:138px; /* fixed dimensions */width: 138px;border: solid 1px white;background-color:#F5F5F5;line-height:138px; text-align:center;}div.painting a img{border:none;vertical-align:middle;}
#5楼
这对我有用。 将此添加到图像css:
img
{display: block;margin: auto;
}
#6楼
这是将所有内容置于任何内容中间的另一种方法。
工作小提琴
HTML :(像以往一样简单)
<div class="Container"><div class="Content"> /*this can be an img, span, or everything else*/I'm the Content</div>
</div>
CSS:
.Container
{text-align: center;
}.Container:before{content: '';height: 100%;display: inline-block;vertical-align: middle;}.Content
{display: inline-block;vertical-align: middle;
}
好处
容器高度和内容高度未知。
居中,没有特定的负边距,无需设置行高(因此可以在多行文本中很好地工作)并且没有脚本,也可以很好地用于CSS过渡。
#7楼
这可以正常工作:
display: block;
margin-left: auto;
margin-right: auto
否则,如果上述方法仅使您水平居中,请尝试以下方法:
.outerContainer {position: relative;
}.innerContainer {width: 50px; //your image/element width hereheight: 50px; //your image/element height hereoverflow: auto;margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;
}
#8楼
另一种方法(此处未提及)是Flexbox 。
只需在容器div
上设置以下规则:
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
小提琴
div { width: 200px; height: 200px; border: 1px solid green; display: flex; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ }
<div> <img src="http://lorempixel.com/50/50/food" alt="" /> </div>
一个很好的开始Flexbox,就看到它的一些特点,并得到语法最大的浏览器支持flexyboxes
另外,如今的浏览器支持也相当不错: caniuse
为了实现跨浏览器的display: flex
兼容性display: flex
和align-items
,可以使用以下命令:
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
#9楼
我喜欢跳旧车!
这是此答案的2015年更新 。 我开始使用CSS3 transform
来完成定位工作。 这使您不必制作任何额外的HTML,也不必进行数学运算(查找事物的半角宽度)就可以在任何元素上使用它!
这是一个示例(结尾是小提琴)。 您的HTML:
<div class="bigDiv"><div class="smallDiv"></div>
</div>
附带CSS:
.bigDiv {width:200px;height:200px;background-color:#efefef;position:relative;
}
.smallDiv {width:50px;height:50px;background-color:#cc0000;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
}
这几天我经常做的事情是,我将为我想集中学习的课程授课,并且每次都重复使用该课程。 例如:
<div class="bigDiv"><div class="smallDiv centerThis"></div>
</div>
的CSS
.bigDiv {width:200px;height:200px;background-color:#efefef;position:relative;
}
.smallDiv {width:50px;height:50px;background-color:#cc0000;
}
.centerThis {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
}
这样,我将始终能够将某些内容放在容器的中心。 您只需要确保要居中的东西在已定义position
的容器中即可。
这是一个小提琴
BTW:这也可以使BIGGER div在SMALLER div中居中。
#10楼
@sleepy您可以使用以下属性轻松地执行此操作:
#content { display: flex; align-items: center; width: 200px; height: 200px; border: 1px solid red; } #myImage { display: block; width: 50px; height: 50px; margin: auto; border: 1px solid yellow; }
<div id="content"> <img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png"> </div>
参考: W3
#11楼
使用定位。 以下为我工作:
div{display:block;overflow:hidden;width: 200px; height: 200px; position: relative;
}
div img{width: 50px; height: 50px; top: 50%;left: 50%;bottom: 50%;right: 50%;position: absolute;
}
#12楼
简单
img {transform: translate(50%,50%);
}
#13楼
只需设置图像边距自动,如下所示。
img{margin:auto;width:50%;height:auto;
}
检查这些例子
#14楼
通常,我将line-height
设置为200px。 通常会骗人。
#15楼
我会用position:relative;
设置更大的div position:relative;
然后为您的图像执行以下操作:
img.classname{position:absolute;top:50%;left:50%;margin-top:-25px;margin-left:-25px;
}
这仅起作用,因为您知道图像和包含div的尺寸。 这也将使您在包含div的其他项中……而使用line-height之类的解决方案则不会。
编辑 :注意...您的边距是图像大小的一半。
#16楼
在div中
style="text-align:center; line-height:200px"
#17楼
当然,另一种方法是使用valign
创建table
。 无论您是否知道div的高度,这都将起作用。
<div><table width="100%" height="100%" align="center" valign="center"><tr><td><img src="foo.jpg" alt="foo" /></td></tr></table>
</div>
但只要有可能,您都应该始终坚持使用css
。
#18楼
垂直对齐是最被滥用的CSS样式之一。 您对非td或css“ display:table-cell”元素的期望如何不起作用。
这是此事的一个很好的帖子。 http://phrogz.net/CSS/vertical-align/index.html
实现您正在寻找的最常用方法是:
- 顶部/底部填充
- 绝对位置
- 行高
#19楼
我一直在尝试使用hmtl和css使图像在圆形形状内的垂直和水平居中。
在结合了该线程的几个要点之后,这是我想到的 : jsFiddle
这是三列布局中的另一个示例: jsFiddle
CSS:
#circle {
width: 100px;
height: 100px;
background: #A7A9AB;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin: 0 auto;
position: relative;
}.images {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
HTML:
<div id="circle">
<img class="images" src="https://png.icons8.com/facebook-like-filled/ios7/50" />
</div>
#20楼
就个人而言,我将其作为div中的背景图像放置,其CSS为:
#demo {background: url(bg_apple_little.gif) no-repeat center center;height: 200px;width: 200px;
}
(假设您已经指定height
和width
并添加background
,则id="demo"
的div应该不成问题)
让浏览器承受压力。
#21楼
您可以以此设置图像的位置为水平居中对齐
#imageId {display: block;margin-left: auto;margin-right:auto;
}
#22楼
.container {
height: 200px;
width: 200px;
float:left;
position:relative;
}
.children-with-img {
position: absolute;
width:50px;
height:50px;
left:50%;
top:50%;
transform:translate(-50%);
}
#23楼
我们可以使用flex
轻松实现这一点。 不需要background-image
。
<!DOCTYPE html> <html> <head> <style> #image-wrapper{ width:500px; height:500px; border:1px solid #333; display:flex; justify-content:center; align-items:center; } </style> </head> <body> <div id="image-wrapper"> <img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png"> </div> </body> </html>
#24楼
div { position: absolute; border: 3px solid green; width: 200px; height: 200px; } img { position: relative; border: 3px solid red; width: 50px; height: 50px; } .center { top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ }
<div class="center"> <img class="center" src="http://placeholders.org/250/000/fff" /> </div>
相关: 将图像居中
#25楼
使用Flexbox :
.outerDiv {display: flex;flex-direction: column;justify-content: center; /* Centering y-axis */align-items :center; /* Centering x-axis */
}
#26楼
您可以使用以下代码在水平和垂直方向上居中图像(在IE / FF中有效)。 它将图像的顶部边缘恰好位于浏览器高度的50%,并且margin-top(将图像高度的一半向上拉)将其完美居中。
<style type="text/css">#middle {position: absolute; top: 50%;} /* for explorer only*/#middle[id] {vertical-align: middle; width: 100%;}#inner {position: relative; top: -50%} /* for explorer only */
</style><body style="background-color:#eeeeee"><div id="middle"><div id="inner" align="center" style="margin-top:...px"> /* the number will be half the height of your image, so for example if the height is 500px then you will put 250px for the margin-top */<img src="..." height="..." width="..." /></div></div>
</body>
#27楼
感谢其他人的线索。
我用这种方法
div.image-thumbnail
{width: 85px;height: 85px;line-height: 85px;display: inline-block;text-align: center;
}
div.image-thumbnail img
{vertical-align: middle;
}
#28楼
这对我有用:
<body><table id="table-foo"><tr><td><img src="foo.png" /> </td></tr></table>
</body>
<style type="text/css">html, body {height: 100%;}#table-foo {width: 100%;height: 100%;text-align: center;vertical-align: middle;}#table-foo img {display: block;margin: 0 auto;}
</style>
#29楼
我发现上面的Valamas和Lepu的答案是最直接的答案,用于处理未知大小或已知大小的图像,您不希望将这些代码硬编码到CSS中。 我只是做了一些小调整:删除不相关的样式,将其大小设置为200px以匹配问题,并添加max-height / max-width来处理可能太大的图像。
div.image-thumbnail
{width: 200px;height: 200px;line-height: 200px;text-align: center;
}
div.image-thumbnail img
{vertical-align: middle;max-height: 200px;max-width: 200px;
}
#30楼
这是一个旧的解决方案,但是浏览器的市场占有率已经足够提高,如果您不担心IE7的性能下降,那么您可以在没有IE hack的情况下获得成功。 当您知道外部容器的尺寸但可能会或可能不会知道内部图像的尺寸时,此方法会起作用。
.parent {display: table;height: 200px; /* can be percentages, too, like 100% */width: 200px; /* can be percentages, too, like 100% */
}.child {display: table-cell;vertical-align: middle;margin: 0 auto;
}
<div class="parent"><div class="child"><img src="foo.png" alt="bar" /></div></div>
如何在更大的div内使图像中心(垂直和水平)居中[重复]相关推荐
- div块内的CSS中心文本(水平和垂直)
我将div设置为display:block ( height和width 90px ),并且里面有一些文本. 我需要文本在垂直和水平方向上居中对齐. 我尝试了text-align:center ,但是 ...
- LintCode 661. 把二叉搜索树转化成更大的树
描述 给定二叉搜索树(BST),将其转换为更大的树,使原始BST上每个节点的值都更改为在原始树中大于等于该节点值的节点值之和(包括该节点). 样例 样例1: 输入 : {5,2,13}5/ \2 13 ...
- 【leetcode刷题】51.下一个更大元素 I——Java版
⭐欢迎订阅<leetcode>专栏,每日一题,每天进步⭐ 算法不行,现在语文也不行了.我哭了,你们呢? --leetcode此题热评 前言 哈喽,大家好,我是一条. 糊涂算法,难得糊涂 & ...
- 为什么小批量会可以使模型获得更大的泛化
来源:Deephub Imba 本文约2000字,建议阅读5分钟 本文为你介绍了如批量大小在机器学习中的重要性. 批大小是机器学习中重要的超参数之一.这个超参数定义了在更新内部模型参数之前要处理的样本 ...
- 屏幕显示密度dpi_华为mate7——修改 DPI 屏幕密度 !可使屏幕在视觉上变得更大...
本帖最后由 丶浩南丶 于 2015-6-5 18:36 编辑 7eed1eeb1ec25a2f7c2eba32caac659a8147.jpg (99.56 KB, 下载次数: 106) 2015-6 ...
- 苹果六电池_分析师称,苹果找到了一种在iPhone 13内安装更大电池的方法
分析师Ming-Chi Kuo爆料,他们希望看到苹果为其手机配备更长久的电池.正如可能已经知道的那样,阻止Apple在iPhone中包括更大电池的原因是组件在手机内部占据的空间.但据AppleInsi ...
- 使用赛孚耐数据保护解决方案在整个生命周期内确保信息安全连载三:云范例威胁为信息保护基础带来更大的威胁...
云作为卸载点 上面提及的挑战本身就很让人望而生畏了,但是当今新兴的云范例威胁为信息保护基础带来更大的威胁. 多数关于信用.所有权和信息风险的假设都是以对有区别性(即使是频繁分裂的)周界的现实世界的理解 ...
- div内图片和文字水平垂直居中
大小不固定的图片.多行文字的水平垂直居中 本文综述 想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实 ...
- 耶鲁大学等机构提出的脑机接口软硬件协同设计,增加脑机的更大潜力
脑机接口(brain -computer Interfaces, BCIs)或脑机接口(brain - machine Interfaces, BMIs)自从被医生和研究人员使用以来,已经为治疗神经系 ...
最新文章
- 将数据库表中数据转为XML
- Unity OBB分包(基础APK+OBB) 与apk签名
- SqlBulkCopy加了事务真的会变快吗?
- 为什么 C 语言仍然占据统治地位?
- matlab 一元线性微分,怎样用matlab求一元线性函数极值
- 几个常见的 Socket 连接错误及原因
- unicode编码对照表
- C语言图书管理系统 文件数据库
- 20200411使用Potplayer对视频进行逐帧截图
- 单片机定时器一1ms12MHz_单片机原理及接口技术笔记1单片机概述
- 一文搞定权限管理!授权、鉴权超详细解析
- 5A成绩通过PMP,备考经验总结——姜飞
- 台式电脑如何修复计算机,大神告诉你电脑不断重启如何修复
- 50欧姆线设计 高频pcb_高频PCB设计:射频电路的布局的走线
- 提交git仓库报错Your branch is up-to-date with ‘origin/master‘.
- Verilog基础模块总结
- 20 October in ss
- python中1到100怎么表示_python如何计算1到100的和(用for循环)
- 汇编 SHL指令和SHR指令
- python实现BMR计算器,日历计算,存钱挑战,分形树和五角星绘制等