我有一个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 here
height: 50px; //your image/element height here
overflow: 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>