0

下面的代码调整了一个img的边距，所以它在一个宽度为600px的div中居中。它通常可以工作，但有时不能，需要第二次调用。

编辑：忘了提：这个功能是由另一个人触发的，他将图像的来源设置为另一个，因此改变了图像。

有什么帮助吗？

function adjustMargin(imageId) {
var image = document.getElementById(imageId);
image.setAttribute("style", "margin: 0 " + (300 - image.clientWidth / 2).toString() + "px");
}

可以在这里看到不太好的工作示例。

4

2 回答 2

5

使用 CSS：

#imgId {
    margin: 0 auto;
    display: block;
    // you are subtracting 300px and dividing by 2 
    // so assume your image is 300px wide
    width: 300px; 
}

img 标签是一个内联元素，margin: 0 auto它只适用于你必须包含在 img css 中的块元素。display: block

中心内联元素的替代方法是：

#imgId {
    text-align: center;
}

两种方法的演示在这里

于 2012-11-12T11:23:15.863 回答
1

首先 - 设置样式的正确方法是：

image.style.margin = "margin: 0 " + (300 - image.clientWidth / 2).toString() + "px";

（好吧，也许没有区别，但是.stylepropery应该用于用JS改变元素的样式）

第二 - 您确定执行该代码时图像已经加载吗？如果没有 -image.clientWidth可能还不可用。onload确定加载图像时，您可能需要使用事件来运行该代码。

第三 - 如布鲁诺的回答中所述，margin:0 auto;将自动将您的图像置于 div 的中心，因此根本不需要 JS。

编辑：

但是使用第三种方法会出现问题，因为图像不是块元素。为了使其工作，请执行以下操作：

<div style="
    width: 600px;
"><img src="Bilder/re-tabouret/lukas_baumgartner_re_tabouret_1@b.jpg" alt="mainArticleImg" class="projektMainImg" id="01:00" style=""></div>

将图像包装到具有指定宽度的 div 中并像这样更新 css：

img.projektMainImg {
margin: 0 auto;
max-width: 600px;
max-height: 400px;
display: block;
}

（见display:block添加）或者简单地用指定宽度的 div 包装图像并添加text-align:center到它的样式（不需要显示块和边距）：

<div style="
    width: 600px;
    text-align: center;
"><img src="Bilder/re-tabouret/lukas_baumgartner_re_tabouret_1@b.jpg" alt="mainArticleImg" class="projektMainImg" id="01:00" style=""></div>

需要 Wraper div 以使图像在左侧 600px 区域居中。否则它将相对于<div class="projektImages">

于 2012-11-12T11:27:17.230 回答