使用Javascript将元素居中水平滚动

I have 8 elements on a horizontal overflow scroll and _posNo is the element number i wish to center on the screen. However, I'm having problems due to different screen sizes. I found this JFiddle on Stack Overflow which does what I want: https://jsfiddle.net/nug4urna/ However, I've tried to adapt it to what I require as you can see below, but I can't work it out..

function scrollDivIntoView(_posNo) {
  var _posNo = '<%= _posNo %>'; 
  var containerWidth = $('myScrollbox').width();

  var elOffset = 300 * _posNo;
  var elWidth = 300;
  var containerWidth = $('myScrollbox').width();
  var offset = elOffset - ((containerWidth - elWidth) / 2);      
  document.getElementById('myScrollbox').scrollLeft = offset;
}


<div class="wrapper">
    <section id="myScrollbox" class="horizontal-scroll">    
        <div class="item" id="item1" runat="server">
            <asp:HyperLink ID="hyp1" runat="server" >
                <asp:Image ID="img1" width="300px" ImageUrl="~/files/images/car1.gif" runat="server" />
            </asp:HyperLink>
        </div> 
        <div class="item" id="item2" runat="server">
            <asp:HyperLink ID="hyp2" runat="server" >
                <asp:Image ID="img2" width="300px" ImageUrl="~/files/images/car2.gif" runat="server" />
            </asp:HyperLink>
        </div> 
        <div class="item" id="item3" runat="server">
            <asp:HyperLink ID="hyp3" runat="server" >
                <asp:Image ID="img3" width="300px" ImageUrl="~/files/images/car3.gif" runat="server" />
            </asp:HyperLink>
        </div> 
        <%-- ANOTHER 5 ITEMS SIMILAR TO ABOVE HERE --%>
    </section>
</div>

 .wrapper {
     width: 100%;
     margin: auto;
     border: 1px solid #333;
     background-image:url(images/field.jpg);
     background-repeat:no-repeat;
  }
 .horizontal-scroll {
     overflow: hidden;
     overflow-x: scroll;
     overflow-y: hidden;
     white-space: nowrap;
     padding: 0px 0;
     height:380px;
  }
 .item {
     border: 0px solid #333;
     display: inline-block;
     width: 260px;
     text-align: center;
     padding: 20px 0px;
     font-size: 16px;
     margin-left: 50px;
     margin-bottom: 60px;
  }