Javascript 具有可变宽度的水平居中图像_Javascript_Html_Css

Javascript 具有可变宽度的水平居中图像

javascript html css

Javascript 具有可变宽度的水平居中图像,javascript,html,css,Javascript,Html,Css,我一直在为这个疯狂：我有一个横幅，它的结构如下： <div id="header-image-wrapper"> <a href="#content-title" id="header-link"> <img id="bannerimage" src="image source" /> </a> </div> 但当我刷新页面时，会出现以下错误： [周期]终止；选择器找到零元素有人知道这意味着什么，为什

我一直在为这个疯狂：我有一个横幅，它的结构如下：

<div id="header-image-wrapper">
    <a href="#content-title" id="header-link">
        <img id="bannerimage" src="image source" />
    </a>
</div>

但当我刷新页面时，会出现以下错误：

[周期]终止；选择器找到零元素

有人知道这意味着什么，为什么会发生吗？另外，如果有人对这个问题有更好的解决方案，请与我分享，因为我已经束手无策了

如果只是一个图像，为什么不能进行文本对齐：居中；关于css

<div style="text-align:center; width:1200px;">
    <img src="img.jpg" />
</div>

如果它只是一个图像，为什么不能进行文本对齐：居中；关于css

<div style="text-align:center; width:1200px;">
    <img src="img.jpg" />
</div>

只需使用CSS：

#banner img {
  display: block;

  margin-left: auto;
  margin-right: auto;
}

然而，这并不能解释这个链接。仅将其应用于横幅也将使其内容居中。

只需使用CSS：

#banner img {
  display: block;

  margin-left: auto;
  margin-right: auto;
}

然而，这并不能解释这个链接。仅将其应用于横幅也将使其内容居中。

编辑：如您所说，如果图像太大，则底部的一个将不起作用，但这一个应将图像作为标记的背景，并将其放置在中心位置

<html>
<head>
<style>
#header-image-wrapper {
text-align: center;
width: 1200px;
overflow: hidden;
}
#header-link {
    background-image: url("<Path to Your Image>");
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    width: 1200px;
    height: 300px;
}
</style>
</head>
<body>
<div id="header-image-wrapper">
    <a href="#content-title" id="header-link">
    </a>
</div>
</body>
</html>

我会在这里使用CSS。为div指定一个ID，然后使用文本align:center对其进行相应的样式设置

<head>
<style>
#imgDIV {
text-align: center; //It's not only for text :)
width: 1200px;
overflow: hidden;
}
</style>
</head>
<div id="imgDIV">
   <img src="path to image">
</div>

编辑：如您所说，若图像太大，底部的一个将不起作用，但这一个应该将图像作为标记的背景，并将其放置在中心

<html>
<head>
<style>
#header-image-wrapper {
text-align: center;
width: 1200px;
overflow: hidden;
}
#header-link {
    background-image: url("<Path to Your Image>");
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    width: 1200px;
    height: 300px;
}
</style>
</head>
<body>
<div id="header-image-wrapper">
    <a href="#content-title" id="header-link">
    </a>
</div>
</body>
</html>

我会在这里使用CSS。为div指定一个ID，然后使用文本align:center对其进行相应的样式设置

<head>
<style>
#imgDIV {
text-align: center; //It's not only for text :)
width: 1200px;
overflow: hidden;
}
</style>
</head>
<div id="imgDIV">
   <img src="path to image">
</div>

可以对img标记使用块显示和自动边距

<div style="overflow:hidden; width:1200px;">
<a href="your link"><img src="imagepath" style="margin:auto; display:block" /></a>

可以对img标记使用块显示和自动边距

<div style="overflow:hidden; width:1200px;">
<a href="your link"><img src="imagepath" style="margin:auto; display:block" /></a>

我不太明白这个问题。我想你要做的是将一个可变宽度的图像居中。假设将图像保留为内联元素，应用文本对齐：居中；要使包含元素的图像正确居中？我认为您要做的是将可变宽度的图像居中。这正是我想做的但是图像在一个内部，而不幸的是，文本对齐：中心没有任何作用：如何使图像显示块级显示：块；和分配左边距：自动；右边距：自动；到图像？@DavidFaux边距：0自动；仅适用于具有定义宽度的元素，因此在本例中它不起作用，对吗？因为我刚试过，但没有。好吧，我想我发现了问题：图像比它包含的元素大。这可能是阻止图像居中的原因吗？我不太理解这个问题。我想你要做的是将一个可变宽度的图像居中。假设将图像保留为内联元素，应用文本对齐：居中；要使包含元素的图像正确居中？我认为您要做的是将可变宽度的图像居中。这正是我想做的但是图像在一个内部，而不幸的是，文本对齐：中心没有任何作用：如何使图像显示块级显示：块；和分配左边距：自动；右边距：自动；到图像？@DavidFaux边距：0自动；仅适用于具有定义宽度的元素，因此在本例中它不起作用，对吗？因为我刚试过，但没有。好吧，我想我发现了问题：图像比它包含的元素大。这可能是阻止图像居中的原因吗？图像在标记内，然后在div内。我尝试使用文本对齐：居中，但它不起作用：图像在标记内，然后在div内。我尝试使用文本对齐：居中，但不起作用：边距：0自动居中图像可能会被覆盖一个标签，所以这可能会有所不同？边距：0自动居中图像可能会被过度杀戮图像被包装在标签中，所以这可能会有所不同？我最终使图像成为CSS背景，而不是内联图像。不确定这是否是最好的解决方案，但这是唯一有效的解决方案：DI最终使图像成为CSS背景，而不是内联图像。不确定这是否是最好的解决方案，但它是唯一有效的解决方案：D