Home/ Questions/Q 7544941
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T08:48:10+00:00

I’ve been going crazy with this: I have a banner which is structured like

  • 0

I’ve been going crazy with this: I have a banner which is structured like this:

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

The images won’t always be the same width, and my client wants the image to be horizontally centered within the div. The div should have a maximum width of 1200px with overflow:hidden, so that if the image is larger than that, it will be centered and the excess on the left and right side will be cut off.

The only way I could think this would work was using javascript:

var imgWidth = document.getElementById('bannerimage').style.width/ 2;
document.getElementById('bannerimage').style.marginLeft = imgWidth;

But when I refresh the page, I get this error:

[cycle] terminating; zero elements found by selector

Does anyone know what that means, and why it’s happening? Also, if someone has a better solution to this problem, please share it as I’m at my wit’s end. 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Edit: (bottom one won’t work if the image is too big, like you said, but this one should) Put the image as the background of the a tag and position it center.

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

    I would just use CSS here. Give the div an ID and then style it accordingly with “text-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>
    • 0