CSS 将图片放在中间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1260099/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
position a picture in the middle
提问by Jovica
I (absolute beginner) would like to put an image into a box with a little margin around. I tried with padding and so, didn't work. Then I tried this:
我（绝对的初学者）想将图像放入一个有一点边距的盒子中。我试过填充等，没有用。然后我尝试了这个：
<div style="border:1px solid #CC6699; width:11em; height:5.5em;">
<img style="align:center; width:10em; height:5em;" src="path">
</div>
But instead the image gets stuck in the upper left corner.
但相反，图像卡在左上角。
回答by Ryan Florence
Couple of ways to do this:
有几种方法可以做到这一点：
My usual is to set a background image instead.
我通常是设置背景图像。
In your css:
在你的 css 中：
div#img_container {
background: url(images/myImage.png) center center
}
In your html:
在你的 html 中：
<div id="img_container"></div>
Or to just put some padding around it in your CSS
或者只是在你的 CSS 中添加一些填充
img#myImage {
padding: 20px;
}
and the HTML
和 HTML
<img id="myImage" src="images/myImage.png" />
回答by Joshua
CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.
CSS 级别 2 没有垂直居中的属性。CSS 级别 3 中可能会有一个。但即使在 CSS2 中，您也可以通过组合一些属性来垂直居中块。诀窍是指定外部块要格式化为表格单元格，因为表格单元格的内容可以垂直居中。
<div style="border:1px solid #CC6699; width:11em; height:5.5em;text-align:center;vertical-align:middle;display:table-cell;">
<img style="width:10em; height:5em;" src="path">
</div>
EDIT
编辑
As rpflo suggests, using the background-position property is especially great if the container happens to be smaller than the image. Just remember to include the "background-repeat:none" style if you don't want the image to be tiled.
正如 rpflo 所建议的，如果容器恰好小于图像，则使用 background-position 属性特别好。如果您不想平铺图像，请记住包含“背景重复：无”样式。
回答by ChrisBenyamin
Try this:
尝试这个：
<html>
<head>
<style>
#wrap {
width: 500px;
text-align: center;
}
.pic {
padding: 5px;
border: 2px solid #000;
}
</style>
</head>
<body>
<div id="wrap">
<img src="logo.gif" class="pic">
</div>
</body>
</html>
回答by Jovica
Use the following small jQuery plugin. It centers the loading image in the middle of the specified container (vertically and horizontally): http://plugins.jquery.com/project/CenterImage
使用以下小型 jQuery 插件。它将加载图像集中在指定容器的中间（垂直和水平）：http: //plugins.jquery.com/project/CenterImage
Demo site: http://www.demosites.somee.com/demos/centerimage.html
演示站点：http: //www.demosites.somee.com/demos/centerimage.html
Usage: This plugin positions a loading image centrally over a specified html container (div, span...).
用法：此插件将加载图像集中放置在指定的 html 容器（div、span...）上。
Currently available configuration settings:
当前可用的配置设置：
{ path: "../Images/ajax.gif", overlayColor: 'green', opacity: 0.2, zindex: 2000, isrelative:true }
Minimum configuration for initialization:
初始化的最低配置：
$('.4th').CenterImage({ path: "../Images/ajax-bar.gif" });
Call this, in order to remove the loading image (and the overlay)
调用这个，以删除加载图像（和覆盖）
$('.4th').CenterImage('remove');
