Question

我（绝对是初学者）想把图像放到一个边缘有一点边框的盒子里。我尝试使用填充，所以，没有工作。然后我尝试了这个：

<div style="border:1px solid #CC6699; width:11em; height:5.5em;">
    <img style="align:center; width:10em; height:5em;" src="path">
</div>

但相反，图像卡在左上角。

Answer 1

有几种方法可以做到这一点：

我通常会设置背景图片。

在你的css中：

div#img_container {
    background: url(images/myImage.png) center center
}

在你的HTML中：

<div id="img_container"></div>

或者只是在CSS中添加一些填充

img#myImage {
    padding: 20px;
}

和HTML

<img id="myImage" src="images/myImage.png" />

Answer 2

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>

修改

正如rpflo建议的那样，如果容器恰好小于图像，则使用background-position属性尤其有用。如果您不希望平铺图像，请记住包含“background-repeat：none”样式。

Answer 3

试试这个：

<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>

Answer 4

使用以下小型jQuery插件。它将加载图像集中在指定容器的中间（垂直和水平）： http://plugins.jquery.com/project/CenterImage

演示网站： http://www.demosites.somee.com/demos/centerimage.html

用法：此插件将加载图像集中放置在指定的html容器（div，span ...）上。

目前可用的配置设置：

{ path: "../Images/ajax.gif", overlayColor: 'green', opacity: 0.2, zindex: 2000, isrelative:true }

初始化的最低配置：

$('.4th').CenterImage({ path: "../Images/ajax-bar.gif" });

调用此方法，以删除加载图像（和叠加层）

$('.4th').CenterImage('remove');

将图片放在中间

4 个答案: